/* clean-css ignore:start */
@font-face { font-family: "GeistSans"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GeistSans.ttf"); }
@font-face { font-family: "CascadiaCode"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/CascadiaCode.ttf"); font-weight: 400; }
/* clean-css ignore:end */

:root {
    /* default color scheme */
    color-scheme: dark;

    --global-font: "GeistSans", sans-serif;
    --global-code-font: "CascadiaCode", monospace;
    --global-title-font: "GeistSans", sans-serif;
    --global-font-size-xs: 0.625rem; /* 10px */
    --global-font-size-sm: 0.75rem; /* 12px */
    --global-font-size: 0.875rem; /* 14px */
    --global-font-size-lg: 1rem; /* 16px */
    --global-font-size-xl: 1.125rem; /* 18px */
    --global-font-size-xxl: 1.375rem; /* 22px */

    --global-color-primary: light-dark(#ffffff, #0b0b0c); /* Near White / Near Black */
    --global-color-secondary: light-dark(#f4f4f5, #1c1c1d); /* Very Light Gray / Very Dark Gray */
    --global-color-tertiary: light-dark(#e6e6e8, #2e2e2f); /* Soft Gray / Deep Gray */
    --global-color-quaternary: light-dark(#cfcfd2, #363637); /* Muted Gray / Medium Dark */
    --global-color-quinary: light-dark(#b5b5b8, #4e4e4f); /* Gentle Gray / Soft Dark Gray */
    --global-color-accent: #2d69da;
    --global-color-accent-light: #0d99ff;
    --global-color-accent-dark: #304b86;
    --global-color-success: #54cf73;
    --global-color-error: #f54c4c;
    --global-color-warning: #ffc107;
    --global-text-primary: light-dark(#0d0d0e, #f0efef);
    --global-text-secondary: light-dark(#262627, #cacacc);
    --global-text-tertiary: light-dark(#545455, #9e9ea0);
    --global-text-quaternary: light-dark(#6c6c6d, #777779);
    --global-intense-background: light-dark(#fefefe, #040405);
    --global-medium-background: #252525;
    --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
    --global-color-transparent: #00000000;

    --global-padding-xs: 0.25rem;
    --global-padding-sm: 0.375rem;
    --global-padding-md: 0.5rem;
    --global-padding-lg: 0.75rem;
    --global-padding-xl: 1rem;

    --svg-size-xxs: 0.5rem;
    --svg-size-xs: 0.7rem;
    --svg-size-sm: 0.85rem;
    --svg-size-md: 1rem;
    --svg-size-lg: 1.25rem;
    --svg-size-xl: 1.4rem;
    --svg-size-xxl: 1.6rem;

    --code-editor-font-size: 14px;
    --code-editor-row-height: 20px;
    --graphnode-background: 17, 17, 17;
}

:root[data-spacing="compact"] {
    --global-padding-xs: 0.15rem;
    --global-padding-sm: 0.25rem;
    --global-padding-md: 0.35rem;
    --global-padding-lg: 0.5rem;
    --global-padding-xl: 0.75rem;
}

:root[data-theme="light"] { color-scheme: light }

/* Font Size media queries */

/* Large Desktops (1440px+) */
@media screen and (max-width: 1440px) {
    :root {
        --global-font-size-xs: 0.5625rem; /* 9px */
        --global-font-size-sm: 0.6875rem; /* 11px */
        --global-font-size: 0.8125rem;    /* 13px */
        --global-font-size-lg: 0.9375rem; /* 15px */
        --global-font-size-xl: 1.0625rem; /* 17px */
        --global-font-size-xxl: 1.3125rem; /* 21px */
    }
}

/* Small Desktops & Large Tablets (1200px - 1439px) */
@media screen and (max-width: 1200px) {
    :root {
        --global-font-size-xs: 0.5625rem; /* 9px */
        --global-font-size-sm: 0.6875rem; /* 11px */
        --global-font-size: 0.75rem;      /* 12px */
        --global-font-size-lg: 0.875rem;  /* 14px */
        --global-font-size-xl: 1rem;      /* 16px */
        --global-font-size-xxl: 1.25rem;  /* 20px */
    }
}

/* Tablets & Small Laptops (992px - 1199px) */
@media screen and (max-width: 992px) {
    :root {
        --global-font-size-xs: 0.5rem;    /* 8px */
        --global-font-size-sm: 0.625rem;  /* 10px */
        --global-font-size: 0.6875rem;    /* 11px */
        --global-font-size-lg: 0.8125rem; /* 13px */
        --global-font-size-xl: 0.9375rem; /* 15px */
        --global-font-size-xxl: 1.1875rem; /* 19px */
    }
}

/* Large Phones & Small Tablets (768px - 991px) */
@media screen and (max-width: 768px) {
    :root {
        --global-font-size-xs: 0.4375rem; /* 7px */
        --global-font-size-sm: 0.5625rem; /* 9px */
        --global-font-size: 0.625rem;    /* 10px */
        --global-font-size-lg: 0.75rem;  /* 12px */
        --global-font-size-xl: 0.875rem; /* 14px */
        --global-font-size-xxl: 1.125rem; /* 18px */
    }
}

/* Small Phones (576px - 767px) */
@media screen and (max-width: 576px) {
    :root {
        --global-font-size-xs: 0.375rem; /* 6px */
        --global-font-size-sm: 0.5rem;   /* 8px */
        --global-font-size: 0.5625rem;  /* 9px */
        --global-font-size-lg: 0.6875rem; /* 11px */
        --global-font-size-xl: 0.8125rem; /* 13px */
        --global-font-size-xxl: 1rem;    /* 16px */
    }
}

/* Extra Small Phones (< 375px) */
@media screen and (max-width: 375px) {
    :root {
        --global-font-size-xs: 0.3125rem; /* 5px */
        --global-font-size-sm: 0.4375rem; /* 7px */
        --global-font-size: 0.5rem;     /* 8px */
        --global-font-size-lg: 0.625rem; /* 10px */
        --global-font-size-xl: 0.75rem;  /* 12px */
        --global-font-size-xxl: 0.9375rem; /* 15px */
    }
}

/* Retina & HiDPI Displays (2x) */
@media screen and (min-resolution: 2dppx),
       screen and (-webkit-min-device-pixel-ratio: 2) {
    :root {
        --global-font-size-xs: 0.625rem;  /* 10px */
        --global-font-size-sm: 0.75rem;   /* 12px */
        --global-font-size: 0.875rem;    /* 14px */
        --global-font-size-lg: 1rem;     /* 16px */
        --global-font-size-xl: 1.125rem;  /* 18px */
        --global-font-size-xxl: 1.375rem; /* 22px */
    }
}

/* Ultra Retina & 4K Screens (3x and above) */
@media screen and (min-resolution: 3dppx),
       screen and (-webkit-min-device-pixel-ratio: 3) {
    :root {
        --global-font-size-xs: 0.6875rem; /* 11px */
        --global-font-size-sm: 0.8125rem; /* 13px */
        --global-font-size: 0.9375rem;   /* 15px */
        --global-font-size-lg: 1.0625rem; /* 17px */
        --global-font-size-xl: 1.25rem;   /* 20px */
        --global-font-size-xxl: 1.5rem;   /* 24px */
    }
}

::-webkit-scrollbar {
    height: 3px;
    width: 4px;
    background: none;
    margin-right: 2px;
}

::-webkit-scrollbar-thumb {
    background: #aaaaaaa5;
    border-radius: 6px;
}

::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

/* default app layout (editor-like) */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--global-font);
    background-color: var(--global-color-primary);
}

#lexroot {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: absolute;
    outline: none;
    transform-origin: center center;
    transition-property: transform, border-radius;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-scale="sheet-top"] #lexroot {
    border-radius: 8px;
    transform: scale(0.975) translate3d(0, -16px, 0);
}

:root[data-scale="sheet-bottom"] #lexroot {
    border-radius: 8px;
    transform: scale(0.975) translate3d(0, 16px, 0);
}

:root[data-scale="sheet-left"] #lexroot {
    border-radius: 8px;
    transform: scale(0.975) translate3d(-16px, 0, 0);
}

:root[data-scale="sheet-right"] #lexroot {
    border-radius: 8px;
    transform: scale(0.975) translate3d(16px, 0, 0);
}

/* document layout (scrolling page) */

:root[data-layout="document"] #lexroot {
    bottom: unset;
}

:root[data-layout="document"], :root[data-layout="document"] body {
    overflow-y: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.no-transition,
.no-transition * {
  transition: none !important;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}

a:any-link {
    color: var(--global-color-accent-light);
}

canvas {
    border-radius: 6px;
}

.collapsible {
    width: 100%;
    display: flex;
}

.collapsible a.collapser {
    --rotation: 90deg;
    transform: rotate(var(--rotation, 0deg));
    transition: transform 0.15s ease-out;
}

.collapsible a.collapser[data-collapsed] {
    --rotation: 0deg;
}

dialog {
    transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
    animation: dialogHide 0.1s forwards;
}

dialog[open] {
    animation: dialogShow 0.1s forwards;
}

dialog::backdrop {
    background-color: #000000ab;
    position: absolute;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

@keyframes dialogShow {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0)
        scale3d(0.92, 0.92, 0.92)
        rotate(0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
        scale3d(1, 1, 1)
        rotate(0);
    }
}

@keyframes dialogHide {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
        scale3d(1, 1, 1)
        rotate(0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -8px, 0)
        scale3d(0.92, 0.92, 0.92)
        rotate(0);
    }
}

body.nocursor * {
    cursor: none !important;
}

body.noevents * {
    pointer-events: none !important;
}

.grabbing {
    cursor: move;
}

.hidden-opacity {
    opacity: 0 !important;
    pointer-events: none;
}

.ellipsis-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Some global colors */

.orange { color: orange }
.gray { color: gray }
.pipelineblue { color: #007acc }
.dodgerblue { color: dodgerblue }
.munsellblue { color: #0093af }
.pictonblue { color: #45B1E8 }
.lightblue { color: #5aa8f7 }
.goldenrod { color: goldenrod }
.metallicyellow { color: #FDCC0D }
.heliotrope { color: #d460ff }
.blueviolet { color: blueviolet }

svg.xxs { width: var(--svg-size-xxs); height: var(--svg-size-xxs); }
svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
svg.sm { width: var(--svg-size-sm); height: var(--svg-size-sm); }
svg.lg { width: var(--svg-size-lg); height: var(--svg-size-lg); }
svg.xl { width: var(--svg-size-xl); height: var(--svg-size-xl); }
svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }

#modal {
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    z-index: 99;
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

.leximage {
    text-align: center;
}

.leximage img {
    max-width: 256px;
}

.lock {
    margin-left: 4px;
}

.lexicon {
    cursor: pointer;
    line-height: inherit !important;
    color: var(--global-text-secondary);
    align-content: center;
    border-radius: 4px;
    transition: all 0.15s linear;
    place-self: center;
}

.lexicon:hover {
    color: var(--global-text-primary);
}

.lexicon:active {
    color: var(--global-text-secondary);
}

.lexicon.triggered {
    background-color: var(--global-color-secondary);
}

svg {
    width: 1rem;
    height: 1rem;
    color: var(--global-text-secondary);
    stroke: currentColor;
    display: block;
}

svg path {
    color: inherit;
    stroke: inherit;
}

a svg, svg path {
    pointer-events: none;
}

.lexicon:hover svg, .lexicon:hover svg path {
    color: var(--global-text-primary) !important;
}

/* Notifications */

.notifications ol {
    width: unset;
    min-width: fit-content;
    max-width: 480px;
    max-height: 100vh;
    position: fixed;
    margin: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.15em;
    z-index: 100;
    padding: 0;
}

.notifications ol.list {
    pointer-events: auto;
}

.lextoast {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    background-color: light-dark(var(--global-color-primary), var(--global-color-secondary));
    border: 1px solid var(--global-color-tertiary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    pointer-events: auto;
    padding: 0.75rem;
    border-radius: 8px;
    z-index: 3000;
    transition: all 0.5s cubic-bezier(.42,.97,.52,1.19);
    --element-offset: 8px;
    --stack-offset: calc(100% - var(--element-offset));
}

.lextoast.top {
    --stack-offset: calc(-100% + var(--element-offset));
}

.lextoast[data-open="true"] {
    translate: 0 0 !important;
}

.lextoast[data-open="false"] {
    translate: 100% 0 !important;
    opacity: 0 !important;
}

.lextoast.center[data-open="false"] {
    translate: 0 30px !important;
}

.lextoast.center.top[data-open="false"] {
    translate: 0 -30px !important;
}

.lextoast.left[data-open="false"] {
    translate: -100% 0 !important;
}

.lextoast .lextoastcontent {
    display: grid;
    gap: 0.25rem;
    height: fit-content;
    margin: auto 0;
    max-width: 512px;
}

.lextoast .lextoastcontent div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lextoast .lextoastcontent .title {
    font-size: var(--global-font-size-lg);
    color: var(--global-text-primary);
}

.lextoast .lextoastcontent .desc {
    font-size: var(--global-font-size-sm);
    color: var(--global-text-secondary);
}

.lextoast .lexcomponent {
    padding-inline: 1rem;
}

.lextoast .closer {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: var(--global-font-size-sm);
}

.lextoast:first-child {
    z-index: 3000;
    transform: translateY(0px) scale(1);
}
.lextoast:nth-child(2) {
    z-index: 2999;
    opacity: 0.9;
    transform: translateY(var(--stack-offset)) scale(0.95);
}
.lextoast:nth-child(3) {
    z-index: 2998;
    opacity: 0.8;
    transform: translateY(calc(var(--stack-offset) * 2)) scale(0.9);
}
.lextoast:nth-child(n+4) {
    opacity: 0;
    transform: translateY(calc(var(--stack-offset) * 3)) scale(0.9);
}

.notifications ol.list .lextoast {
    transform: translateY(0px) scale(1);
    opacity: 1;
}

/* Commandbar */

.commandbar {
    position: absolute;
    background-color: var(--global-blur-background);
    --webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    border: 1px solid #d0d0ec2a;
    width: 30%;
    max-width: 740px;
    top: 15%;
    left: calc(50% - min(15%, 740px));
    margin: 0;
    padding: 0 0 2px 0;
    flex-wrap: wrap;
    z-index: 105;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    /* this fixes the overflow:hidden in Chrome/Opera */
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    /* this fixes the overflow:hidden in Chrome/Opera */
}

.commandbar[open] {
    display: flex;
}

.commandbar .lexarea {
    background: none !important;
}

.commandbar .searchitembox {
    flex-basis: 100%;
    overflow-y: scroll;
    max-height: calc(512px - 48px);
}

.commandbar .searchitembox::-webkit-scrollbar {
    display: none;
}

.commandbar .searchitembox .searchitem {
    padding: 6px;
    padding-left: 48px;
    color: var(--global-text-primary);
    font-size: var(--global-font-size);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.commandbar .searchitembox .searchitem svg:not(.separator) {
    margin-left: -28px;
    margin-right: 12px;
}

.commandbar .searchitembox .searchitem .lang-ext {
    margin-left: 4px;
    color: #676e75;
    font-size: var(--global-font-size);
}

.commandbar .searchitembox .searchitem.last {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.commandbar .searchitembox .searchitem.hovered {
    background-color: var(--global-color-accent);
    color: #f5f5f5;
}

/* Footer */

.lexfooter {
    background-color: var(--global-color-primary);
    padding: 0.5rem;
    width: 100%;
    font-size: var(--global-font-size);
    line-height: 1.25rem;
}

.lexfooter .columns {
    display: grid;
    text-align: center;
}

.lexfooter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 12px;
}

.lexfooter h2 {
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    font-weight: 600;
}

.lexfooter ul li {
    margin-bottom: 8px;
    font-size: var(--global-font-size);
    color: var(--global-text-secondary);
}

.lexfooter ul li a {
	display: flex;
	gap: 0.4rem;
	align-items: center;
    place-content: center;
}

.lexfooter a {
    text-decoration: none;
    color: var(--global-text-secondary);
    transition: all 0.15s ease-in-out;
}

.lexfooter .credits-and-socials {
    color: var(--global-text-secondary);
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    padding-inline: 36px;
}

.lexfooter p {
    font-size: var(--global-font-size);
}

.lexfooter .credits-and-socials p {
    font-size: var(--global-font-size-sm);
}

@media (max-width: 768px) {
    .lexfooter .credits-and-socials {
        display: block;
        text-align: center;
    }

    .lexfooter .socials {
        justify-content: center;
    }
}

.lexfooter hr {
    border: none;
    border-top: 1px solid #2c2c2c;
}

/* Dialogs and alerts */

.lexdialog {
    outline: none;
    border: 1px solid #aaaaaa48;
    background: none;
    margin: 0;
    padding: 0;
    position: absolute;
    min-width: 256px;
    min-height: max-content;
    overflow: hidden;
    box-shadow: 0 2px 6px #101010bb;
    border-radius: 8px;
    z-index: 101;
    background-color: var(--global-color-secondary);
}

.lexdialog:has(.lexselect) {
    overflow: visible;
}

.lexdialogtitle {
    width: 100%;
    font-family: var(--global-title-font);
    font-weight: 600;
    font-size: var(--global-font-size-xl);
    color: var(--global-text-secondary);
    text-shadow: 0px 1px 6px #22222283;
    padding: var(--global-padding-lg);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    outline: none;
    display: flex;
    justify-content: space-between;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
}

.lexdialogcontent {
    width: 100%;
    padding: 0.25rem;
    word-break: break-all;
    color: var(--global-text-primary);
    font-size: var(--global-font-size);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-left: 0px !important;
}

.lexdialogcontent.notitle {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.lexdialogcloser {
    font-size: var(--global-font-size-lg);
    color: var(--global-text-secondary);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexdialogcloser.notitle {
    position: absolute;
    top: 0.5em;
    right: 0;
}

.lexdialogcloser:hover {
    color: var(--global-text-tertiary);
}

.lexdialogcloser:active {
    transform: scale(0.99);
}

.lexdialogcloser.notitle:active {
    transform: scale(0.99);
}

.lexdialog.prompt textarea {
    color: var(--global-text-secondary);
}

/* Pocket Dialog */

.lexdialog.pocket {
    background-color: var(--global-color-primary);
}

.lexdialog.pocket.dockable {
    transition: ease-out left 0.2s, ease-out top 0.2s, ease-in transform 0.2s;
}

.lexdialog.pocket .lexdialogtitle {
    width: 100%;
    font-size: var(--global-font-size-lg);
    background: var(--global-intense-background);
}

.lexdialog.pocket .lexdialogcontent {
    max-height: -webkit-fill-available;
    opacity: 1;

    -webkit-transition: max-height 0.2s;
    -moz-transition: max-height 0.2s;
    -ms-transition: max-height 0.2s;
    -o-transition: max-height 0.2s;
    transition: max-height 0.2s;

    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

/* Suppose any child will be a div.. */
.lexdialog.pocket .lexdialogcontent:not(:has(div)) {
    padding: 0px;
}

.lexdialog.pocket.minimized .lexdialogtitle {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.lexdialog.pocket.minimized .lexdialogcontent {
    max-height: 0px;
    padding: 0px;
    opacity: 0;

    -webkit-transition: max-height 0.2s;
    -moz-transition: max-height 0.2s;
    -ms-transition: max-height 0.2s;
    -o-transition: max-height 0.2s;
    transition: max-height 0.2s;

    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;

    -webkit-transition: padding 0.2s;
    -moz-transition: padding 0.2s;
    -ms-transition: padding 0.2s;
    -o-transition: padding 0.2s;
    transition: padding 0.2s;
}

/* Pop up dialog */
.lexpopup {
    background: var(--global-blur-background);
}

:root[data-theme="light"] .lexdialog {
    box-shadow: 0px 2px 6px #30303083;
}

:root[data-theme="light"] .lexdialogtitle {
    text-shadow: 0px 2px 2px #8d8d8d34;
}

/* Generic */

.lexcontainer.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    border: 0px solid var(--global-color-tertiary);
}

@media (min-width: 1600px) {
    .lexcontainer.wrapper {
        border-left-width: 1px;
        border-right-width: 1px;
    }
}

@media (min-width: 1800px) {
    .lexcontainer.wrapper {
        max-width: 1736px;
    }
}

@media (min-width: 2100px) {
    .lexcontainer.wrapper {
        max-width: 1920px;
    }
}

.lextooltip {
    position: fixed;
    background-color: var(--global-text-primary);
    color: var(--global-color-primary);
    font-size: var(--global-font-size-sm);
    padding: 0.2rem;
    padding-inline: 0.5rem;
    border-radius: 0.4rem;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation-duration: 400ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
    animation-name: slideUpAndFade;
    z-index: 150;
    pointer-events: none;
}

.lextooltip[data-closed] {
    opacity: 0;
}

/* Generic Popover */

.lexpopover {
    background-color: var(--global-color-primary);
    border-radius: 0.5rem;
    border: 1px solid #7a797c4f;
    padding: 0.25rem;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 150;
    animation-duration: 400ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

@keyframes slideUpAndFade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideRightAndFade {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideDownAndFade {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideLeftAndFade {
	from {
		opacity: 0;
		transform: translateX(8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.lexpopover[data-side="top"]{
	animation-name: slideDownAndFade;
}

.lexpopover[data-side="right"]{
	animation-name: slideLeftAndFade;
}

.lexpopover[data-side="bottom"]{
	animation-name: slideUpAndFade;
}

.lexpopover[data-side="left"]{
	animation-name: slideRightAndFade;
}

/* Sheet */

.lexsheet {
    position: fixed;
    z-index: 150;
    animation-duration: 400ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

@keyframes enterBottom {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes enterLeft {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes enterTop {
	from {
		opacity: 0;
		transform: translateY(-100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes enterRight {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.lexsheet[data-side="top"]{
	animation-name: enterTop;
}

.lexsheet[data-side="right"]{
	animation-name: enterRight;
}

.lexsheet[data-side="bottom"]{
	animation-name: enterBottom;
}

.lexsheet[data-side="left"]{
	animation-name: enterLeft;
}

/* Dropdown Menu */

.lexdropdownmenu {
    background-color: var(--global-color-primary);
    font-size: var(--global-font-size);
    position: fixed;
    left: 0px;
    top: 0px;
    min-width: 172px;
    max-width: 244px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    padding: var(--global-padding-xs);
    border-radius: 6px;
    border: 1px solid #7a797c4f;
    outline: none;
    animation-duration: 400ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

.lexdropdownmenuitem {
    display: flex;
    flex-direction: row;
    padding: var(--global-padding-md);
    border-radius: 6px;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.1s linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexdropdownmenuitem.disabled {
    color: var(--global-text-tertiary);
    cursor: default;
}

.lexdropdownmenuitem.label {
    font-weight: 600;
    cursor: default;
}

.lexdropdownmenuitem:not(.label, .disabled):hover {
    background-color: var(--global-color-tertiary);
}

.lexdropdownmenuitem:not(.label, .disabled):active {
    transform: scale(0.99);
}

.lexdropdownmenuitem .lexcheckbox {
    width: 1.25em;
    height: 1.25em;
}

.lexdropdownmenuitem a {
    margin-left: auto;
    align-content: center;
    pointer-events: none;
}

.lexdropdownmenuitem a:first-child {
    margin: 0;
}

.lexdropdownmenu .separator {
    width: calc(100% + 0.4rem);
    translate: -0.2rem 0;
    border-bottom: 1px solid;
    border-color: var(--global-text-tertiary);
    opacity: 0.25;
    margin-block: 0.1rem;
}

.lexdropdownmenu[data-side="top"]{
	animation-name: slideDownAndFade;
}

.lexdropdownmenu[data-side="right"]{
	animation-name: slideLeftAndFade;
}

.lexdropdownmenu[data-side="bottom"]{
	animation-name: slideUpAndFade;
}

.lexdropdownmenu[data-side="left"]{
	animation-name: slideRightAndFade;
}

/* Area */

.lexarea {
    background-color: var(--global-color-primary);
    margin: 0;
}

/* Split bar */

.lexsplitbar {
    background: rgba(186, 188, 207, 0.01);
    border-radius: 8px;
}

.lexsplitbar:hover {
    background-color: #8e949be8;
}

.lexsplitbar.horizontal {
    cursor: ew-resize;
}

.lexsplitbar.vertical {
    cursor: ns-resize;
    left: calc(50% - 32px);
}

.lexsplitbar:hover {
    background: rgba(186, 188, 207, 0.45);
}

.lexsplitbar.dragging-split-area {
    background-color: red;
}

/* Branches */

.lexpanel {
    margin: 0;
    padding: var(--global-padding-xs);
    overflow: hidden;
    overflow-y: scroll;
}

.lexpanel::-webkit-scrollbar {
    display: none;
}

.lexbranch {
    width: 100%;
    border-radius: 6px;
}

.lexpanel .lexbranch:not(:last-of-type) {
    margin-bottom: 4px !important;
}

.lexbranch .lexbranchcontent {
    padding: var(--global-padding-xs);
    background-color: var(--global-color-secondary);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.lexbranch.last .lexbranchcontent {
    overflow: hidden;
}

.lexbranchtitle {
    font-family: var(--global-title-font);
    font-size: var(--global-font-size-lg);
    font-weight: 500;
    color: var(--global-text-primary);
    background-color: var(--global-color-secondary);
    text-shadow: 0px 1px 6px #42424260;
    letter-spacing: calc(var(--global-font-size-lg) * 0.025);
    padding: var(--global-padding-lg);
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexbranch.closed .lexbranchtitle {
    background-color: inherit;
}

/* Tab */
.lexbranch .branchicon {
    font-size: var(--global-font-size);
    margin-right: 12px;
    align-content: center;
}

.lexbranch.last.closed .lexbranchtitle {
    margin-bottom: 6px;
}

.lexbranch .switch-branch-button {
    font-size: var(--global-font-size-sm);
    transition: transform 0.15s ease-out;
    margin-left: auto;
    margin-right: 8px;
    align-content: center;
    transform: rotate(90deg);
}

.lexbranch.closed .switch-branch-button {
    transform: rotate(0deg);
}

:root[data-theme="light"] .lexbranchtitle {
    color: var(--global-text-secondary);
    background-color: var(--global-color-secondary);
    text-shadow: 0px 2px 2px #e0e0e03a;
}

:root[data-theme="light"] .lexbranch.closed .lexbranchtitle {
    background-color: inherit;
}

/* Components */

.lexcomponent {
    display: flex;
    align-items: center;
    padding: var(--global-padding-xs);
    font-size: var(--global-font-size);
    color: var(--global-text-primary);
    line-height: 2;
    overflow: hidden;
}

.lexinlinecomponents .lexcomponentname.float-center {
    justify-content: center;
}

.lexinlinecomponents .lexcomponentname.float-right {
    justify-content: end;
    -moz-transform: translateX(-1em);
    -webkit-transform: translateX(-1em);
    transform: translateX(-1em);
}

.lexcomponent.auto {
    width: unset !important;
}

.lexcomponent.micro {
    min-width: 24px;
    width: 3% !important;
}

.lexcomponent.right {
    margin-left: auto;
    margin-right: 8px;
}

.lexcomponent.small {
    width: 5% !important;
}

.lexcomponent.md {
    width: 75% !important;
}

.lexinlinecomponents {
    display: flex;
}

.lexcomponentseparator div {
    -ms-transform: translateY(-11px);
    -webkit-transform: translateY(-11px);
    transform: translateY(-11px);
    height: 2px;
    width: 11px;
    cursor: ew-resize;
    color: var(--global-text-tertiary);
}

.lexcomponentseparator div:hover {
    color: #4d4d5ac4;
}

.lexcomponentseparator div div {
    background: #dddddd33;
}

.lexcomponentname {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    font-family: var(--global-font);
    color: var(--global-text-secondary);
}

.lexinlinecomponents .lexcomponentname {
    width: fit-content !important;
    padding-inline: 0.4rem;
}

.lexseparator {
    border-top: 1px solid var(--global-color-secondary);
    border-bottom: 1px solid var(--global-color-tertiary);
    margin: 5px 0 5px 0px;
}

.lexbranch .lexseparator {
    border-top: 1px solid var(--global-color-primary);
    border-bottom: 1px solid var(--global-color-tertiary);
    width: -moz-calc(100% - 8px);
    width: -webkit-calc(100% - 8px);
    width: calc(100% - 8px);
    margin: 5px 0 5px 4px;
}

:root[data-theme="light"] .lexbranch .lexseparator {
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #c1c1c1;
}

.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
    font-family: var(--global-font);
    padding: var(--global-padding-xs);
    color: var(--global-text-primary);
    --background-color: var(--global-color-tertiary);
    background-color: var(--background-color);
    outline: none;
    border-radius: 6px;
    border: 1px solid var(--global-color-transparent);
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    transition-duration: .15s;
}

.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider, .outline):hover {
    background-color: color-mix(in srgb, var(--background-color), #000 5%);
}

.lexcomponent input.colorinput {
    border: none;
    margin-left: -4px;
}

.lexcomponent input:disabled:not(.lextoggle) {
    outline: none;
    border: none;
    color: var(--global-text-tertiary);
}

/* Text Component */

.lexcomponent input.lextext, .lexcomponent div.lextext {
    width: 100%;
    border-radius: 6px;
    position: relative;
    border: 1px solid transparent;
    padding: var(--global-padding-xs) 0.75rem;
}

.lexcomponent .lextext:disabled {
    background-color: var(--global-color-tertiary);
    color: var(--global-text-tertiary);
}

.lexcomponent .lextext.formlabel {
    margin-left: 8px;
    margin-bottom: -6px;
    font-weight: 500;
    padding: 0;
    font-size: var(--global-font-size-sm);
}

.lexcomponent .lextext.outline {
    background: var(--global-color-primary);
    border: 1px solid #7a797c4f;
}

.lexcomponent .lextext.nobg {
    background: none;
    border: 1px solid transparent;
}

.lexcomponent .lextext.dashed {
    background: var(--global-color-primary);
    border: 1px dashed #7a797c4f;
}

.lexcomponent .lextext.nobg:hover {
    background: none;
}

.lexcomponent .lextext:focus {
    border: 1px solid var(--global-text-quaternary);
}

.lexcomponent .lextext:invalid:focus {
    border: 1px solid var(--global-color-error);
}

.lexcomponent .lextext.lexwarning div {
    color: var(--global-color-warning);
    font-weight: 600;
}

.lexcomponent .lextext.lexwarning i {
    color: var(--global-color-warning);
    margin-right: 16px;
}

/* TextArea Component */

.lexcomponent textarea {
    width: 100%;
    word-break: break-word;
    font-family: var(--global-font);
    background: none;
    padding: var(--global-padding-md);
    color: var(--global-text-primary);
    outline: none;
    border-radius: 6px;
    border: 1px solid var(--global-color-transparent);
    transition: 0.1s linear;
}

.lexcomponent textarea.outline {
    background: var(--global-color-primary);
    border: 1px solid #7a797c4f;
}

.lexcomponent textarea.nobg {
    background: none;
    border: 1px solid transparent;
}

.lexcomponent textarea.dashed {
    background: var(--global-color-primary);
    border: 1px dashed #7a797c4f;
}

.lexcomponent textarea.outline:hover, .lexcomponent .lextext.nobg:hover {
    background: none;
}

.lexcomponent textarea:disabled {
    resize: none;
}

.lexcomponent textarea:focus {
    border: 1px solid var(--global-text-quaternary);
}

/* Input Color Component */

.lexcolor {
    display: flex;
    align-items: center;
}

.lexcolor > div:first-child {
    background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}

.lexcolor .lexcolorsample {
    width: 9px;
    height: 18px;
    cursor: pointer;
    background-color: currentColor;
}

.lexcolor .colorinfo {
    color: var(--global-text-primary);
    min-width: 56px;
    margin-left: 8px;
    font-weight: 600;
}

.lexcolor .lexcomponent {
    padding: 0px;
}

.lexcolorpicker {
    background-color: var(--global-color-primary);
    font-size: var(--global-font-size);
    width: 256px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem;
}

.lexcolorpicker input.lextext {
    padding-inline: 0 !important;
    color: var(--global-text-secondary) !important;
    cursor: pointer;
}

.lexcolormarker {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    background-color: transparent;
    position: absolute;
    border: 3px solid #fff;
    pointer-events: none;
}

.lexcolorpickerbg {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.3rem;
    background-image: linear-gradient(0deg, #000000 0, transparent), linear-gradient(90deg, #ffffff 0, #fff0);
    position: relative;
    cursor: pointer;
}

.lexhuetracker {
    width: 100%;
    height: 1rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(-90deg, red, #f0f 17%, #00f 33%, #0ff, #0f0 67%, #ff0 83%, red);
    position: relative;
    cursor: pointer;
}

.lexalphatracker {
    width: 100%;
    height: 1rem;
    border-radius: 0.5rem;
    /* color: rgba(0, 0, 0, 1); */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 12px 12px;
    background-color: white; /* fallback */
    position: relative;
    cursor: pointer;
}

.lexcolorpicker * {
    font-size: var(--global-font-size-sm);
}

.lexcolorpicker .lextext {
    letter-spacing: 0.02rem;
}

.lexcolorpicker .lexcomponent {
    padding: 2px !important;
}

/* Title Component */

.lextitle {
    width: fit-content !important;
    width: -moz-fit-content;
    color: var(--global-text-secondary);
    font-weight: 600;
    font-size: var(--global-font-size);
    margin: 12px;
    padding: var(--global-padding-xs) var(--global-padding-lg);
    line-height: 1.5;
    display: grid;
    align-content: center;
    border-radius: 12px;
    background-color: var(--global-color-tertiary);
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexinlinecomponents .lextitle {
    margin: 8px;
    height: 24px;
    flex: none;
}

.lextitle.link {
    color: var(--global-text-secondary);
    text-decoration: none;
    transition: transform 0.1s;
}

.lextitle.link:hover {
    color: var(--global-color-accent-light);
    transform: scale(1.02);
}


/* Button Component */

.lexbutton {
    --button-color: var(--global-color-tertiary);
    --border-color: var(--global-color-quinary);
    background-color: var(--button-color);
    border: 1px solid transparent;
    border-radius: 6px;
    min-width: 1.8rem;
    min-height: 22px !important;
    align-content: center;
    color: var(--global-text-primary);
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--global-font);
    font-weight: 500;
    display: grid;
    transition: 0.1s linear;
}

/* Colors */
.lexbutton.primary { --button-color: var(--global-color-primary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary); }
.lexbutton.secondary { --button-color: var(--global-color-secondary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary);  }
.lexbutton.accent { --button-color: var(--global-color-accent); --border-color: var(--global-color-quaternary); color: #fefefe;  }
.lexbutton.contrast { --button-color: var(--global-text-primary); --border-color: var(--global-color-quaternary); color: var(--global-color-primary);  }
.lexbutton.success { --button-color: var(--global-color-success); --border-color: #013101; color: var(--border-color);  }
.lexbutton.error { --button-color: var(--global-color-error); --border-color: #310108; color: var(--border-color);  }
.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }

/* Few Sizes */
.lexbutton.xs { width: 35%; margin: 0 auto; }
.lexbutton.sm { width: 65%; margin: 0 auto; }

/* Styles */
.lexbutton.outline {
    border-color: var(--button-color);
    color: var(--button-color);
    background: none;
}
.lexbutton.dashed {
    border-style: dashed;
    border-color: var(--border-color);
}

.lexbutton:hover:not(.outline, .bg-none) {
    background-color: color-mix(in srgb, var(--button-color), #000 9%) !important;
}

:root[data-theme="light"] .lexbutton:hover:not(.outline) {
    background-color: color-mix(in srgb, var(--button-color), #fff 9%) !important;
}

.lexbutton.outline:hover {
    color: color-mix(in srgb, var(--button-color), #000 9%) !important;
}

:root[data-theme="light"] .lexbutton.outline:hover {
    color: color-mix(in srgb, var(--button-color), #fff 9%) !important;
}

.lexbutton:active:not(.lexbutton.combo) {
    background-color: color-mix(in srgb, var(--button-color), #fff 4%);
}
:root[data-theme="light"] .lexbutton:active:not(.lexbutton.combo) {
    background-color: color-mix(in srgb, var(--button-color), #000 4%);
}

.lexbutton:disabled, .lexbutton:disabled a {
    color: var(--global-text-quaternary);
}

.lexbutton.selected {
    --button-color: var(--global-color-accent);
    --border-color: var(--global-color-quaternary);
    color: #fefefe;
}

.lexbutton * {
    pointer-events: none;
}

.lexbutton span {
    align-items: center;
    display: flex;
    place-content: center;
    pointer-events: none;
    gap: 0.4rem;
}

.lexbutton.left span {
    place-content: start;
    margin-left: 0.5rem;
}

.lexbutton.array a {
    margin-right: 4px;
    margin-left: auto;
}

/* Combo Buttons */

.lexcombobuttons .lexcombobuttonsbox {
    display: flex;
    background-color: var(--global-color-tertiary);
    width: max-content;
    justify-self: center;
    padding: var(--global-padding-xs);
    border-radius: 8px;
    gap: 0.2em;
}

.lexcombobuttons.right .lexcombobuttonsbox {
    justify-self: right;
}

.lexcombobuttons.left .lexcombobuttonsbox {
    justify-self: left;
}

.lexcombobuttons .lexbutton.combo {
    display: flex;
    padding: 0.35em 1em;
    transition: 0.2s;
    --button-color: var(--global-color-tertiary);
}

.lexcombobuttons .lexbutton.combo:hover {
    color: var(--global-text-secondary);
}

.lexcombobuttons .lexbutton.combo.selected {
    --button-color: var(--global-color-primary);
    color: var(--global-text-primary);
    outline: none;
}

.lexcombobuttons .lexbutton.combo span {
    line-height: 18px;
}

/* Select (Combobox) */

.lexselect {
    display: grid;
    align-content: center;
    position: relative;
}

.lexselect .lexcomponent {
    padding: 0;
}

.lexselect .lexfilter {
    width: 100%;
    padding: 2px 3px;
    background-color: var(--global-color-primary);
    border-bottom: 1px solid;
    border-color: color-mix(in srgb, var(--global-text-tertiary), #00000000 75%);
}

.lexselect .lexfilter input:hover {
    background-color: var(--global-color-primary);
}

.lexselect ul .lexlistitem {
    font-size: var(--global-font-size-sm);
}

.lexselect .option {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.lexselect .option.media {
    flex-direction: column;
}

.lexselect .lexlistitem {
    height: fit-content;
}

.lexselect .lexselectoptions {
    background-color: var(--global-color-primary);
    margin: 0;
    padding: 0;
    outline: none;
    width: fit-content;
    /* max-height: -webkit-fill-available; */
    position: fixed;
    z-index: 10000;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.203);
    border-radius: 6px;
    border: 1px solid #7a797c4f;
    overflow-y: auto;
    overflow-x: hidden;
}

dialog .lexselect .lexselectoptions {
    max-height: none;
}

.lexselect ul {
    list-style: none;
    padding: 0px;
    z-index: 10;
    margin: 0;
    width: 100%;
    height: 100%;
}

.lexselect ul .lexselectinnerlist {
    width: 100%;
    height: calc(100% - 25px);
    padding: 0.3rem;
    display: grid;
}

.lexselect .lexselectitem {
    width: 100%;
    cursor: pointer;
    color: var(--global-text-primary);
    min-height: 20px;
    line-height: 22px;
    padding-inline: 0.35rem;
    padding-block: 0.2rem;
    border-radius: 6px;
    align-content: center;
    display: flow-root;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexselect .lexselectlabel {
    width: 100%;
    color: var(--global-text-tertiary);
    padding-inline: 0.6rem;
    padding-block: 0.2rem;
    min-height: 20px;
    line-height: 22px;
    align-content: center;
    display: flow-root;
    font-weight: 500;
}

.lexselect .lexselectitem.empty {
    cursor: default;
}

.lexselect .lexselectitem.empty .option {
    padding: 12px;
}

.lexselect .lexselectitem:not(.empty):hover {
    background-color: var(--global-color-tertiary);
}

.lexselect .lexselectitem:not(.empty):active {
    color: #fff;
}

.lexselect .lexselectitem a {
    display: none;
    margin-left: auto;
    margin-right: 0.25rem;
    padding-left: 1rem;
}

.lexselect .lexselectitem.selected {
    font-weight: 600;
}

.lexselect .lexselectitem.selected a {
    display: block;
}

.lexselect img {
    max-height: 4rem;
    margin-top: 0.5rem;
}

:root[data-theme="light"] .lexselect .lexfilter {
    background-color: var(--global-color-primary);
}

:root[data-theme="light"] .lexselect ul {
    background-color: var(--global-color-primary);
    box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
}

/* Check box */

.lexcheckbox {
    --checkbox-bg-color: light-dark(var(--global-text-tertiary), var(--global-color-tertiary));
    --checkbox-fg-color: #fff;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-color .2s,box-shadow .2s;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    padding: 0.12rem;
    padding-left: 0.13rem;
    display: inline-block;
    background-color: var(--global-color-primary);
    color: var(--checkbox-fg-color);
    border-width: 1px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--checkbox-bg-color) 50%, transparent);
    border-radius: 4px;
    margin: auto 4px;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Colors */
.lexcheckbox.primary { --checkbox-bg-color: var(--global-color-primary); }
:root[data-theme="light"] .lexcheckbox.primary { --checkbox-fg-color: var(--global-text-primary); }
.lexcheckbox.secondary { --checkbox-bg-color: var(--global-color-secondary); }
:root[data-theme="light"] .lexcheckbox.secondary { --checkbox-fg-color: var(--global-text-tertiary); }
.lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
.lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
.lexcheckbox.success { --checkbox-bg-color: var(--global-color-success); }
.lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }


.lexcheckbox:before {
    content: "";
    opacity: 0;
    clip-path: polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);
    width: 100%;
    height: 100%;
    background-color: currentColor;
    line-height: .75;
    transition: clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;
    display: block;
    rotate: 45deg
}

.lexcheckbox:checked,.lexcheckbox[aria-checked=true] {
    background-color: var(--checkbox-bg-color);
}

.lexcheckbox:checked:before, .lexcheckbox[aria-checked=true]:before {
    clip-path: polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);
    opacity: 1;
}

.lexcheckboxcont {
    display: flex;
    gap: 0.4rem;
    margin: 0 auto;
}

.lexcheckboxcont span {
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lexcheckboxsubmenu {
    width: 100%;
    padding: 4px;
    padding-inline: 8px;
    color: var(--global-text-secondary);
    grid-column: span 2;
}

.lexcheckboxsubmenu .lexcomponent {
    width: 100% !important;
}

/* Toggle Component */

.lextoggle {
    --toggle-bg-color: var(--global-text-tertiary); /* Color of background CHECKED */
    --toggle-fg-color: #f4f4f6; /* Color of the thumb */
    border: 1px solid transparent;
    color: var(--toggle-fg-color);
    background-color: var(--global-color-quaternary); /* Color of background NO check */
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 12px;
    width: 40px;
    height: 21px;
    flex-shrink: 0;
    grid-template-columns: 0fr 1fr 1fr;
    place-content: center;
    transition: color .3s,grid-template-columns .2s;
    display: inline-grid;
    position: relative
}

.lextoggle.outline {
    border: 1px solid transparent;
}

/* Colors */
.lextoggle.primary { --toggle-bg-color: var(--global-color-primary);}
.lextoggle.secondary { --toggle-bg-color: var(--global-color-tertiary); }
.lextoggle.accent { --toggle-bg-color: var(--global-color-accent); }
.lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); }
.lextoggle.success { --toggle-bg-color: var(--global-color-success);  }
.lextoggle.error { --toggle-bg-color: var(--global-color-error);  }
.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }

.lextoggle > * {
    z-index: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0000;
    border: none;
    grid-column: 2/span 1;
    grid-row-start: 1;
    height: 100%;
    padding: 0.125rem;
    transition: opacity .2s,rotate .4s
}

.lextoggle > :focus {
    outline-style: none
}

.lextoggle > :nth-child(2) {
    color: #1f1f1f;
    rotate: none
}

.lextoggle > :nth-child(3) {
    color: #1f1f1f;
    opacity: 0;
    rotate: -15deg;
}

.lextoggle:has(:checked) > :nth-child(2) {
    opacity: 0;
    rotate: 15deg;
}

.lextoggle:has(:checked) > :nth-child(3) {
    opacity: 1;
    rotate: none;
}

.lextoggle:before {
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    height: 100%;
    background-color: currentColor;
    grid-row-start: 1;
    grid-column-start: 2;
    transition: background-color .1s,translate .2s,inset-inline-start .2s;
    position: relative;
    inset-inline-start: 0;
    translate: 0
}

.lextoggle:focus-visible, .lextoggle:has(:focus-visible) {
    outline-offset: 2px;
    outline: 2px solid
}

.lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked) {
    background-color: var(--toggle-bg-color);
    grid-template-columns: 1fr 1fr 0fr;
}

.lextoggle.contrast:checked, .lextoggle.contrast[aria-checked=true], .lextoggle.contrast:has(>input:checked) {
    --toggle-fg-color: var(--global-color-primary);
}

.lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
    border: 1px solid currentColor;
    color: var(--toggle-bg-color);
    background-color: var(--global-color-secondary);
}

.lextoggle.outline.primary:checked, .lextoggle.outline.primary[aria-checked=true], .lextoggle.outline.primary:has(>input:checked),
.lextoggle.outline.secondary:checked, .lextoggle.outline.secondary[aria-checked=true], .lextoggle.outline.secondary:has(>input:checked) {
    background-color: var(--global-color-quaternary);
    border: 1px solid var(--global-text-tertiary);
}

:is(.lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked)):before {
    background-color: currentColor;
}

.lextoggle:indeterminate {
    grid-template-columns: 0.5fr 1fr 0.5fr;
}

.lextoggle:disabled {
    border: 1px solid var(--global-text-tertiary);
    cursor: not-allowed;
}

.lextoggle:disabled:before {
    background-color: var(--global-text-tertiary);
}

.lextogglecont {
    display: flex;
    gap: 0.4rem;
    margin: 0 auto;
}

.lextogglecont .toggletext {
    font-weight: 500;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lextogglesubmenu {
    width: 100%;
    padding: 6px;
    padding-inline: 8px;
    color: var(--global-text-secondary);
    margin-top: -1px;
    grid-column: span 2;
}

/* Radio Group Component */

.lexradiogroup {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    padding: 0.1em;
}

.lexradiogroup span {
    font-weight: 500;
}

.lexradiogroup .lexradiogroupitem {
    display: flex;
    padding: 0.1em;
    padding-inline: 1.4em;
    gap: 0.65em;
    align-items: center;
}

.lexradiogroup .lexradiogroupitem span {
    font-weight: unset;
}

.lexradiogroup .lexradiogroupitem button {
    width: 16px;
    height: 16px;
    min-width: 16px !important;
    min-height: 16px !important;
    background-color: var(--global-intense-background);
    border: 1px solid var(--global-text-tertiary) !important;
}

.lexradiogroup .lexradiogroupitem button:disabled {
    border-color: var(--global-color-quaternary) !important;
}

.lexradiogroup .lexradiogroupitem button span {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    pointer-events: none;
    margin: auto;
}

.lexradiogroup .lexradiogroupitem button.checked span {
    background-color: var(--global-text-primary);
}

.lexradiogroup .lexradiogroupitem button.checked:disabled span {
    background-color: var(--global-color-tertiary) !important;
}

/* Colors */
.lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
.lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent-light); }
.lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
.lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
.lexradiogroup.success .lexradiogroupitem button.checked span { background-color: var(--global-color-success); }
.lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
.lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }

/* Vector Component */

.lexvector {
    display: flex;
}

.lexvector a {
    font-size: var(--global-font-size-sm);
}

.lexvector .vecbox {
    display: flex;
    position: relative;
    width: 100%;
    flex: 1 0 0%;
    border-radius: 4px;
    border: 2px solid var(--global-color-transparent);
    margin-right: 2px;
    background-color: var(--global-color-tertiary);
    transition: 0.1s linear;
    cursor: text;
}

.lexvector .vecbox:hover {
    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
}

.lexcomponent .numberbox .drag-icon,
.lexcomponent .vecbox .drag-icon {
    font-size: var(--global-font-size-sm);
    color: var(--global-text-secondary);
    z-index: 11;
    margin-right: 0.25rem;
    pointer-events: none;
}

.lexvector .vecbox:has(input:focus) {
    border: 2px solid var(--global-color-accent);
}

.lexvector .vecbox span {
    min-width: 3px;
    width: 3px;
    justify-content: center;
    background-color: #22292fbf;
    display: flex;
    font-weight: 600;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexvector .vecbox span.x {
    background-color: #eb6767;
}

.lexvector .vecbox span.y {
    background-color: #72e27d;
}

.lexvector .vecbox span.z {
    background-color: #6081db;
}

.lexvector .vecbox span.w {
    background-color: var(--global-text-primary);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.lexvector .vecbox .vecinput,
.numberbox .vecinput {
    margin-left: 2px;
    border: none;
    width: 100%;
}

.lexvector .vecbox .vecinput:focus,
.numberbox .vecinput:focus {
    color: var(--global-text-secondary);
}

/* Number Component */

.lexcomponent .numberbox {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--global-color-tertiary);
    border: 1px solid var(--global-color-transparent);
    border-radius: 6px;
    margin-right: 2px;
    position: relative;
    overflow-x: hidden;
    transition: 0.1s linear;
}

.lexcomponent .numberbox::-webkit-scrollbar {
    display: none;
}

.lexcomponent .numberbox:hover {
    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
}

.lexcomponent .numberbox:has(input:focus) {
    border: 1px solid var(--global-text-quaternary);
}

.lexcomponent .numberbox .input-box {
    padding-block: var(--global-padding-xs);
}

.lexcomponent .numberbox .input-box input {
    padding-block: 0;
}

.lexcomponent .numberbox span {
    position: absolute;
    pointer-events: none;
    align-self: center;
}

.lexcomponent .numberbox:has(input[type=range]) span {
    margin-top: -12px;
}

.lexinputmeasure {
    font-family: var(--global-font);
    font-size: var(--global-font-size);
}

.lexinputslider {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none !important;
    width: 100%;
    height: 1px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
}

.lexinputslider:hover {
    opacity: 1;
}

.lexinputslider::-moz-range-track {
    height: 1px;
    background: #a19dc9;
}

.lexinputslider::-webkit-slider-runnable-track {
    height: 1px;
    background: #a19dc9;
}

.lexinputslider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border: 1px solid #c9c7de;
    border-radius: 6px;
    background: var(--global-color-accent);
    cursor: pointer;
}

.lexinputslider::-moz-range-thumb {
    margin-top: -8px;
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: #a19dc9;
    cursor: pointer;
}

/* Range Component */

.lexrangeslider {
    --range-thumb-color: var(--global-color-primary);
    --range-thumb-size: 1rem;
    --range-progress: currentColor;
    --range-fill: 1;
    --range-thumb-padding: 0.2rem;
    --range-bg: color-mix(in oklab,currentColor 20%,#0000);
    --range-dir: 1;
    --radius-selector: 0.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
    border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
    width: 100%;
    height: var(--range-thumb-size);
    border: none;
    outline: none;
    color: var(--global-text-tertiary);
    background-color: #0000;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: opacity .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    vertical-align: middle;
}

.lexrangeslider:disabled {
    cursor: default;
}

/* Colors */
.lexrangeslider.primary { color: var(--global-color-primary); --range-thumb-color: var(--global-text-secondary); }
.lexrangeslider.secondary { color: var(--global-color-secondary); --range-thumb-color: var(--global-text-secondary); }
.lexrangeslider.accent { color: var(--global-color-accent); }
.lexrangeslider.contrast { color: var(--global-text-primary); }
.lexrangeslider.success { color: var(--global-color-success); }
.lexrangeslider.error { color: var(--global-color-error); }
.lexrangeslider.warning { color: var(--global-color-warning); }

.lexrangeslider.left {
    --range-dir: -1;
}

.lexrangeslider.no-fill {
    --range-fill: 0;
    --in-range-color: color-mix(in oklab,currentColor 30%,#0000);
    --range-bg: linear-gradient(to right,
    var(--in-range-color) 0%,
    var(--in-range-color) calc(var(--range-min-value) + var(--range-fix-min-offset)),
    currentColor calc(var(--range-min-value) + var(--range-fix-min-offset)),
    currentColor calc( var(--range-max-value) - var(--range-fix-max-offset)),
    var(--in-range-color) calc( var(--range-max-value) - var(--range-fix-max-offset)),
    var(--in-range-color) 100%);
    background: var(--range-bg);
}

.lexrangeslider.overlap {
    --range-bg: transparent;
}

.lexrangeslider:hover {
    filter: brightness(1.1);
}

.lexrangeslider::-moz-range-track {
    background-color: var(--range-bg);
    border-radius: var(--radius-selector);
    width: 100%;
    height: calc(var(--range-thumb-size)*0.5);
}

.lexrangeslider::-webkit-slider-runnable-track {
    background-color: var(--range-bg);
    border-radius: var(--radius-selector);
    width: 100%;
    height: calc(var(--range-thumb-size)*0.5);
}

.lexrangeslider:disabled::-webkit-slider-runnable-track {
    color: var(--global-color-quaternary);
}

.lexrangeslider::-webkit-slider-thumb {
    box-sizing: border-box;
    border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
    height: var(--range-thumb-size);
    width: var(--range-thumb-size);
    border: var(--range-thumb-padding) solid;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--range-progress);
    box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
    background-color: currentColor;
    position: relative;
    top: 50%;
    pointer-events: all !important;
    transform: translateY(-50%);
}

.lexrangeslider::-moz-range-thumb {
    box-sizing: border-box;
    border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
    height: var(--range-thumb-size);
    width: var(--range-thumb-size);
    border: var(--range-thumb-padding) solid;
    color: var(--range-progress);
    box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
    background-color: currentColor;
    position: relative;
    top: 50%;
    pointer-events: all !important;
}

/* OTP Component */

.lexotpslot.active {
    border: 1px solid var(--global-text-primary);
    transition: border-color 0.1s ease-in;
}

.lexotpslot.disabled {
    color: var(--global-text-tertiary);
    cursor: not-allowed;
}

/* Pad Component */

.lexcomponent .lexpad {
    place-items: center;
}

.lexcomponent .lexpad .lexinnerpad {
    border-radius: 4px;
    background-color: light-dark(var(--global-color-tertiary), var(--global-intense-background));
}

.lexcomponent .lexpad .lexinnerpad .lexpadthumb {
    background-color: var(--global-color-accent);
    width: 10%;
    height: 10%;
    border-radius: 2px;
    transform: translate(0px, 0px);
}

.lexcomponent .lexpad .lexinnerpad .lexpadthumb.active {
    background-color: var(--global-color-accent-light);
}

/* Tabs Component */

.lextabscontainer {
    width: 100%;
    height: 100%;
    display: flex;
}

.lextabscontainer.horizontal {
    display: table;
}

.lextabscontainer .tabs {
    padding: 4px;
    background: none !important;
    border-right: 1px solid #a2a5c36a;
    justify-items: center;
    min-width: 32px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lextabscontainer.horizontal .tabs {
    border-right: none;
    border-bottom: 1px solid #a2a5c36a;
    flex-direction: row;
}

.lextabscontainer .components {
    width: 100%;
    padding: 4px;
}

.lextabscontainer .tabs .lextab {
    padding: 4px;
    border-radius: 4px;
    color: #8184a264;
    cursor: pointer;
    text-align: center;
}

/* Data Tree Component */

.lextree {
    border-radius: 6px;
    width: 100%;
    min-height: 12px;
    margin: 0 auto;
    color: var(--global-text-secondary);
    font-weight: 500;
    font-size: var(--global-font-size);
}

.lextree .lexnodetreefilter {
    background: none !important;
}

.lextree .lexnodetreefilter:hover {
    background: none;
}

.lextree .lextreetools {
    background: var(--global-color-tertiary);
    padding: 2px;
    padding-inline: 8px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 0.5rem;
}

.lexcomponent.nobranch .lextree .lextreetools {
    background: var(--global-color-secondary);
}

.lextree .lextreetools input {
    font-size: var(--global-font-size);
    padding-left: 8px;
}

.lextree .lextreetools input:hover {
    background: none;
}

.lextree .lextreetools.notitle {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.lextree span {
    padding: 8px;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--global-text-secondary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: var(--global-font-size-lg);
    font-weight: 500;
    white-space: nowrap;
}

.lextree ul {
    padding-inline-start: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lextree input {
    background: none;
    color: var(--global-text-primary);
    outline: none;
    border: none;
    font-size: var(--global-font-size);
    font-family: var(--global-font);
    line-height: 23px;
}

.lextree .lextreeitem {
    list-style-type: none;
    align-items: center;
    line-height: 25px;
    display: inline-flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    border-radius: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    transition-duration: .15s;
}

.lextree .lextreeitem input {
    color: var(--global-color-primary);
    padding: 0;
    border: none;
}

.lextree .lextreeitem input:hover {
    background: none;
}

.lextree .lextreeitem div {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 8px;
}

.lextree .lextreeitem img {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.lextree .lextreeitem.draggingover {
    background: #7b8ae27b;
}

.lextree .lextreeitem:hover {
    color: var(--global-text-primary);
    background: var(--global-color-secondary);
}

.lextree .lextreeitem.selected {
    color: #f4f4f5;
    background: var(--global-color-accent);
}

.lextree .lextreeitem.selected a.lexicon {
    color: #f4f4f5;
}

.lextree .lextreeitem a.hierarchy {
    margin-right: 6px;
}

/* File Input */

.lexfileinput::file-selector-button {
    align-content: center;
    background-color: var(--global-color-tertiary);
    border-radius: 6px;
    border: none;
    margin-top: 2px;
    min-height: 22px !important;
    color: var(--global-text-primary);
    font-weight: 500;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--global-font);
    transition: 0.1s linear;
}

.lexfileinput::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--global-color-tertiary), #fff 4%);
    color: var(--global-text-primary);
}

.lexfileinput::file-selector-button:not(:disabled):active {
    background-color: var(--global-color-tertiary);
    color: var(--global-text-secondary);
    transform: scale(0.99);
}

.lexfileinput:disabled::file-selector-button {
    cursor: default;
    color: var(--global-text-tertiary);
}

/* Progress bar */

.lexprogress {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lexprogress span {
    width: 10%;
}

.lexprogressbar {
    border: none !important;
    width: 95%;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexprogressbar.editable:hover {
    cursor: pointer;
}

/* The gray background in Chrome, etc. */
.lexprogressbar::-webkit-meter-bar {
    border-radius: 0.25rem;
    height: 12px;
    background: color-mix(in srgb, var(--global-color-accent) 20%, transparent);
}

/* (optimum) */
meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--global-color-accent);
}

.lexprogressbar::-webkit-meter-optimum-value {
    background: var(--global-color-accent);
}

/* (high)*/
meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--global-color-warning);
}

.lexprogressbar::-webkit-meter-suboptimum-value {
    background: var(--global-color-warning);
}

/* (low)*/
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--global-color-error);
}

.lexprogressbar::-webkit-meter-even-less-good-value {
    background: var(--global-color-error);
}

/* Badges */

.lexbadge {
    border-radius: 0.4rem;
    color: #f4f4f5;
    border: 1px solid var(--badge-color, #14171a);
    width: fit-content;
    height: 1.1rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.5rem;
    font-size: var(--global-font-size);
    display: inline-flex;
    background-color: var(--badge-color, #1d232a);
}

/* Colors */
.lexbadge.primary { --badge-color: var(--global-color-primary); color: var(--global-text-primary); }
.lexbadge.secondary { --badge-color: var(--global-color-secondary); color: var(--global-text-primary); }
.lexbadge.accent { --badge-color: var(--global-color-accent); }
.lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
.lexbadge.success { --badge-color: var(--global-color-success); color: #013101; }
.lexbadge.error { --badge-color: var(--global-color-error); color: #310108; }
.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
/* Styles */
.lexbadge.outline {
    color: var(--badge-color, var(--global-text-primary));
    box-shadow: none;
    background-color: #0000;
    background-image: none;
}
.lexbadge.no-bg {
    background: none;
    border: none;
}
/* Sizes */
.lexbadge.xs { height: 0.7rem; padding-inline: 0.3rem; font-size: var(--global-font-size-xs); }
.lexbadge.sm { height: 0.9rem; padding-inline: 0.4rem; font-size: var(--global-font-size-sm); }
/* .lexbadge.md { default } */
.lexbadge.lg { height: 1.3rem; padding-inline: 0.7rem; font-size: var(--global-font-size-lg); }
.lexbadge.xl { height: 1.5rem; padding-inline: 0.85rem; font-size: var(--global-font-size-xl) }

.lexbadge-parent {
    position: relative;
}

.lexbadge-parent .lexbadge {
    border-radius: 0.5rem;
    padding-inline: 0.25rem;
    position: absolute;
    margin-top: -0.25rem;
    right: 0.25rem;
    border: none !important;
}

.lexbadge.chip {
    border-radius: 0.5rem;
    padding-inline: 0.25rem;
    border: none !important;
}

/* Menu Bar */

.lexmenubar {
    width: 100%;
    background-color: var(--global-color-primary);
    display: flex;
    overflow: hidden;
    height: 100%;
    color: var(--global-text-primary);
    font-size: var(--global-font-size);
    font-weight: 500;
}

.lexmenubar .lexmenuentry {
    min-height: 48px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
    margin-left: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexmenubar .lexmenuentry span {
    padding: 4px 8px;
    border-radius: 4px;
}

.lexmenubar .lexmenuentry:hover span,
.lexmenubar .lexmenuentry.selected span {
    color: var(--global-text-primary);
    background-color: var(--global-color-secondary);
}

.lexmenubar .lexmenuentry:active {
    color: #b7b7cba4;
    margin-top: 0.05em;
}

.lexmenubar .lexmenubuttons {
    display: inline-flex;
    background-color: var(--global-color-secondary);
    height: 75%;
    margin: auto;
    border-radius: 6px;
    padding-inline: 4px;
    font-size: var(--global-font-size-lg);
}

.lexmenubar .lexmenubuttons.left {
    margin-left: unset;
}

.lexmenubar .lexmenubuttons.right {
    margin-left: unset;
    margin-right: 12px;
}

.lexmenubar .lexbutton {
    padding-inline: 0.2rem;
    min-width: 0rem;
}

.lexmenubar .lexbutton:hover, :root[data-theme="light"] .lexmenubar .lexbutton:hover {
    background-color: transparent !important;
}

.lexmenubar .lexbutton:active, :root[data-theme="light"] .lexmenubar .lexbutton:active {
    background-color: transparent !important;
}

.lexmenubar .lexmenubutton {
    color: var(--global-text-secondary);
    padding-inline: 0.45em;
    cursor: pointer;
    place-content: center;
    justify-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexmenubar .lexmenubutton.main:first-child {
    margin-left: 8px;
}

.lexmenubar .lexmenubutton.main:last-child {
    margin-right: 8px;
}

.lexmenubar .lexmenubutton a {
    margin-left: 0px !important;
}

.lexmenubar .lexmenubutton.main a {
    font-size: var(--global-font-size-xxl);
}

.lexmenubar .lexmenubutton.disabled a {
    color: var(--global-color-quaternary);
    cursor: default;
}

/* Context Menu */

.lexcontextmenu {
    z-index: 102;
    position: fixed;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(46, 46, 46, 0.2) !important;
    background-color: var(--global-blur-background);
    border: 1px solid #91909036;
}

.lexcontextmenu:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
    border-radius: 6px;
}

.lexcontextmenu .lexmenuboxentry {
    width: 100%;
    color: var(--global-text-secondary);
    padding: 4px;
    padding-inline: 8px;
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexcontextmenu .lexmenuboxentry:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.lexcontextmenu .lexmenuboxentry:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.lexcontextmenu .lexmenuboxentry.cmtitle {
    background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
    font-weight: 600;
    cursor: default;
}

.lexcontextmenu .lexmenuboxentry.cmseparator {
    border-bottom: 1px solid var(--global-color-tertiary);
    padding-bottom: 0;
    padding-top: 0;
}

.lexcontextmenu .lexmenuboxentry .lexentryname {
    margin-right: 1rem;
    font-size: var(--global-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lexcontextmenu .lexmenuboxentry .lexentryname.disabled {
    color: light-dark(#808080b0, #c0c4cb53);
}

/* normal icons  */
.lexcontextmenu .lexmenuboxentry a {
    align-content: center;
    margin-left: auto;
    font-size: var(--global-font-size-xs);
}

.lexcontextmenu .lexmenuboxentry:hover:not(.cmtitle) {
    background-color: var(--global-color-accent);
    color: #f5f5f5;
}

.lexcontextmenu .lexmenuboxentry:active:not(.cmtitle, .cmseparator) {
    padding-top: 0.22em;
    color: #b7b7cba4;
}

.lexcontextmenu .lexseparator {
    margin: 3px 0 3px 10px;
}

.lexcontextmenu .lexentryshort {
    font-size: var(--global-font-size-xs);
    float: right;
    font-weight: bold;
    color: #979aa0e3;
}

/* Side Bar */

.lexsidebar {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.lexsidebar *::-webkit-scrollbar {
    display: none;
}

.lexsidebar .lexcomponent {
    width: 100% !important;
    padding: 0 !important;
}

.lexsidebarcontent {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
}

.lexsidebar .lexsidebargroup {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.lexsidebar .lexsidebargroup:nth-child(n+2) {
    margin-top: 0.15rem;
}

.lexsidebar .lexsidebarseparator {
    background-color: var(--global-color-tertiary);
    width: calc(100% + 20px);
    height: 1px;
    margin: 0 auto;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.lexsidebar .lexsidebarfilter {
    transform: translate(0, 0);
    opacity: 1;
    margin-bottom: 0.5rem;
    transition: all 0.2s cubic-bezier(0,0,.2,1);
}

.lexsidebar .lexsidebargrouptitle {
    font-size: var(--global-font-size-sm);
    font-weight: 600;
    color: var(--global-text-tertiary);
    overflow: hidden;
    display: flex;
}

.lexsidebar .lexsidebargrouptitle div {
    transform: translate(0, 0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
    height: 32px;
    max-height: 32px;
    align-content: center;
}

.lexsidebar .lexsidebargrouptitle a {
    margin: auto 0;
    margin-left: auto;
    margin-right: 8px;
    transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
}

.lexsidebar.collapsing .lexsidebargrouptitle *, .lexsidebar.collapsing .lexsidebarfilter {
    max-height: 0px;
    transform: translate(0, -24px);
    opacity: 0;
    margin-block: 0;
}

.lexsidebar.collapsed .lexsidebargrouptitle * {
    display: none;
}

.lexsidebar .lexsidebarentry {
    width: 100%;
    padding-inline: var(--global-padding-md);
    padding-block: var(--global-padding-sm);
    margin-block: 0.15rem;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lexsidebar .lexsidebarentry span {
    font-size: var(--global-font-size);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: center;
    place-content: start;
}

.lexsidebar .lexsidebarentry:hover {
    background-color: var(--global-color-secondary);
}

.lexsidebar .lexsidebarentry.selected {
    background-color: var(--global-color-accent);
}

.lexsidebar .lexsidebarentry.selected .lexsidebarentrycontent > a {
    color: #f4f4f4;
}

.lexsidebar .lexsidebarentry.selected .lexsidebarentryicon svg path {
    color: #f4f4f4;
}

.lexsidebar .lexsidebarentry:active {
    transform: scale(0.99);
}

.lexsidebar .lexsidebarentry .lexsidebarentrycontent {
    font-weight: 500;
    display: flex;
    gap: 0.8em;
    margin: 0;
    height: 22px;
    opacity: 0.95;
}

.lexsidebar .lexsidebarentry .lexsidebarentrycontent i {
    min-width: 22px;
    max-width: 22px;
    margin: auto 0;
    text-align: center;
    font-size: var(--global-font-size-lg);
}

.lexsidebar .lexsidebarentry .lexsidebarentrycontent a:not(.lexicon) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-content: center;
}

.lexsidebar .lexsidebarentry .lexsidebarentryicon {
    margin-left: 2px;
}

.lexsidebar .lexsidebarentry a.lexicon:not(.lexsidebarentryicon) {
    margin-left: auto;
}

.lexsidebar .lexsidebarentry > * {
    color: var(--global-text-primary);
    font-size: var(--global-font-size);
}

.lexsidebar .lexcheckbox {
    width: 1.25em;
    height: 1.25em;
}

.lexsidebar .lexsidebarsubentrycontainer {
    width: 100%;
    margin-block-start: 4px;
    margin-block-end: 8px;
    margin-left: 16px;
    padding-inline: 16px;
    display: flex;
    align-self: center;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0.95;
    border-left: 1px solid #5251514d;
}

.lexsidebar .collapsablecontainer {
    transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
    padding-inline: 4px;
}

.lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
    margin: 0px;
}

.lexsidebar.collapsing .collapsablecontainer {
    max-height: 0px;
    transform: translate(-8px, -8px);
    opacity: 0;
    margin: 0;
}

.lexsidebar .lexsidebarsubentrycontainer .lexsidebarentry {
    display: flex;
    gap: 0.8em;
}

.lexsidebar.collapsed .collapsablecontainer {
    display: none !important;
}

.lexsidebar.collapsed .lexsidebarentrycontent div, .lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
    display: none;
}

.lexsidebar.collapsed .lexsidebarentry:hover {
    display: flex;
 }

.lexsidebar .lexsidebarheader {
    margin-bottom: 0.5rem;
}

.lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
    width: 100%;
    height: 48px;
    display: flex;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: var(--global-font-size);
    cursor: pointer;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.3s ease-out;
}

.lexsidebar .lexsidebarfooter:hover, .lexsidebar .lexsidebarheader:hover {
    background-color: var(--global-color-secondary);
}

.lexsidebar.collapsing .lexsidebarheader {
    background-color: var(--global-color-accent);
}

.lexsidebar.collapsing .lexsidebarheader svg path {
    color: #f4f4f4;
}

.lexsidebar .lexsidebarfooter:active, .lexsidebar .lexsidebarheader:active {
    transform: scale(0.99);
}

.lexsidebar .lexavatar {
    background-color: var(--global-intense-background);
}

.lexsidebar:not(.collapsing) .lexavatar:has(svg) {
    border: 1px solid #ffffff18;
}

.lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
    height: 100%;
    transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
}

.lexsidebar .lexsidebarfooter div.infodefault, .lexsidebar .lexsidebarheader div.infodefault {
    width: 100%;
    padding-inline: 12px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
    font-size: var(--global-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: width 0.3s cubic-bezier(0,0,.2,1);
}

.lexsidebar .lexsidebarfooter div span:first-child, .lexsidebar .lexsidebarheader div span:first-child {
    font-size: var(--global-font-size);
    font-weight: 600;
}

.lexsidebar .lexsidebarfooter a, .lexsidebar .lexsidebarheader a {
    width: 32px;
    margin-left: 0px;
    align-content: center;
}

.lexsidebar .lexsidebarheader a.toggler {
    margin-left: auto;
}

.lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
    place-self: center;
}

.lexsidebar.collapsing .lexsidebarfooter span, .lexsidebar.collapsing .lexsidebarfooter div,
.lexsidebar.collapsing .lexsidebarheader span, .lexsidebar.collapsing .lexsidebarheader div {
    width: 0px;
    padding-inline: 0px;
}

.lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
.lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
    display: none;
}

/* Overlay Buttons */

.lexoverlaybuttonscontainer {
    position: absolute;
    display: flex;
    top: 0;
    width: 100%;
    pointer-events: none;
}

.lexoverlaybuttons {
    display: flex;
    width: auto !important;
    height: auto !important;
    justify-content: start;
    gap: 0.35em;
    z-index: 95;
    background-color: var(--global-color-secondary);
    margin: 8px;
    padding: 0.25em;
    border-radius: 12px;
}

.lexoverlaybuttons .lexcomponent {
    padding: 0px;
    pointer-events: auto;
    min-width: 32px;
}

.lexoverlaybuttons .lexcomponent button {
    min-width: 32px;
}

.lexoverlaybuttonscontainer.vertical {
    display: grid;
    justify-items: left;
}

.lexoverlaybuttonscontainer.vertical .lexoverlaybuttons {
    display: grid;
}

.lexoverlaybuttonscontainer.vertical .lexcomponent {
    margin-bottom: 6px;
    margin-right: 0px;
}

.lexoverlaybuttonscontainer.vertical .lexcomponent button {
    min-width: 32px;
    max-height: 32px !important;
}

.lexoverlaybuttonscontainer.bottom {
    top: unset;
    bottom: 0;
}

.lexoverlaybuttonscontainer.center {
    justify-content: center;
}

.lexoverlaybuttonscontainer.right {
    justify-content: right;
}

.lexoverlaybuttonscontainer.vertical.center {
    justify-items: center;
}

.lexoverlaybuttonscontainer.vertical.right {
    justify-items: right;
}

.lexoverlaybuttons .lexcomponent:hover {
    background-color: unset;
}

.lexoverlaybuttons .lexbutton {
    --button-color: var(--global-color-secondary);
    padding: var(--global-padding-sm) var(--global-padding-sm);
    font-size: var(--global-font-size-lg);
    border-radius: 10px;
    justify-content: center;
    color: var(--global-text-secondary);
    height: 100%;
}

.lexoverlaybuttons .lexbutton span {
    font-size: var(--global-font-size-lg);
}

.lexoverlaybuttons .lexoverlaygroup {
    display: flex;
    flex: none;
    background-color: var(--global-color-tertiary);
    border-radius: 8px;
}

.lexoverlaybuttons .lexoverlaygroup .lexbutton {
    --button-color: var(--global-color-tertiary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.lexoverlaybuttons .lexbutton.selected {
    --button-color: var(--global-color-accent);
}

.lexoverlaybuttonscontainer.vertical .lexoverlaygroup {
    display: grid;
    margin-right: 0px;
    margin-bottom: 6px;
}

.lexoverlaybuttons .lexoverlaygroup .lexcomponent {
    padding: 0px;
    margin-right: 0px;
}

.lexoverlaybuttonscontainer.vertical .lexoverlaygroup .lexcomponent {
    margin-right: 0px;
    margin-bottom: 0px;
}

.lexoverlaybuttonscontainer.vertical .lexoverlaygroup .lexcomponent button {
    width: 100% !important;
}

.lexoverlaybuttons .lexcomponent:last-child {
    margin-right: 0px;
}

.lexoverlayseparator {
    background-color: var(--global-color-tertiary);
    opacity: 0.9;
    width: 2px;
    height: calc(100% + 0.5em);
    margin-top: -0.25em;
}

.lexoverlaybuttonscontainer.vertical .lexoverlayseparator {
    width: calc(100% + 0.5em);
    height: 2px;
    margin-left: -0.25em;
}

/* Area Tabs */

.lexareatabs {
    display: flex;
    flex-direction: row;
    width: fit-content;
    width: -moz-fit-content;
}

.lexareatabs.dockingtab {
    background-color: #9ebbd65e !important;
}

.lexareatabs .lexareatab {
    font-size: var(--global-font-size);
    font-weight: 600;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 3px;
    color: var(--global-text-tertiary);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 16px;
}

.lexareatabs .lexareatab.thumb {
    background: var(--global-color-accent);
    z-index: 0;
    height: 22px;
    position: absolute;
    transition: linear transform 0.15s;
}

.lexareatabs.row {
    background-color: var(--global-color-tertiary);
    border-radius: 8px;
    padding: 3px;
    gap: 0.1em;
}

.lexareatabs.row .lexareatab {
    padding: var(--global-padding-md) 1.45em;
    transition: 0.1s;
    background: none;
    border-radius: 6px;
}

.lexareatabs.fit {
    width: 100%;
    padding-inline: 6px;
}

.lexareatabs.fit .lexareatab {
    flex: 100%;
    border-radius: 10px;
    z-index: 1;
}

.lexareatabs .lexareatab:active {
    color: #b7b7cba4;
}

.lexareatabs.fit .lexareatab.selected {
    color: #f8f8f8;
}

.lexareatabs.row .lexareatab.selected {
    background-color: var(--global-color-primary);
    outline: none;
    color: var(--global-text-primary);
}

.lexareatabs.folding .lexareatab.selected {
    color: var(--global-text-primary);
    background-color: #555556;
}

.lexareatabs .lexareatab:hover {
    color: var(--global-text-primary);
}

.lexareatabs.row .lexareatab.selected:hover {
    color: var(--global-text-secondary);
}

.lexareatabscontainer {
    transition: height 0.1s;
    transition-timing-function: ease-out;
}

.lexareatabscontainer:not(.lexcodeeditor) > .lexarea.origin {
    padding-block: 0.25rem;
}

.lexareatabscontent.folded {
    max-height: 0px;
}

/* Curve Component */

.curve canvas {
    border-radius: 2px;
}

/* Avatar Component */

.lexavatar {
    width: 48px;
    border-radius: 8px;
    align-content: center;
    aspect-ratio: 1;
}

.lexavatar * {
    border-radius: 8px;
}

.lexavatar img {
    width: 100%;
    height: 100%;
}

/* Card Component */

.lexcard {
    position: relative;
}

.lexcard img {
    width: 100%;
    height: 128px;
    object-fit: cover;
    border-radius: 6px;
    outline: 2px solid var(--global-text-tertiary);
}

.lexcard:hover a {
    color: var(--global-color-accent);
}

.lexcard:hover img {
    outline: 2px solid var(--global-color-accent);
}

.lexcard span {
    font-size: var(--global-font-size-lg);
    font-weight: 500;
    width: 100%;
    display: flex;
    background-color: var(--global-blur-background);
    --webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--global-padding-xs);
    padding-inline-start: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.lexcard span a {
    color: var(--global-text-secondary);
    text-decoration: none;
}

.lexcard span a:hover {
    color: var(--global-color-accent);
}

/* Layers Component */

.lexlayers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
    grid-gap: 6px 8px;
    max-width: calc(26px * 8); /* 8 layers max */
}

.lexlayer {
    --layer-color: var(--global-color-primary);
    background-color: var(--layer-color);
    color: var(--global-text-primary);
    text-align: center;
    place-self: center;
    line-height: 19px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border-radius: 4px;
    font-size: var(--global-font-size-sm);
    transition: background-color 0.15s linear;
}

.lexlayer.selected {
    --layer-color: var(--global-color-accent);
    color: #fff;
}

.lexlayer:hover {
    background-color: color-mix(in srgb, var(--layer-color), #000 7%);
}

.lexlayer:active {
    background-color: color-mix(in srgb, var(--layer-color), #ffffff 4%);
    transform: scale(0.99);
}

/* List Component */

.lexlist {
    background: var(--global-color-primary);
    border-radius: 4px;
    padding: 4px;
    display: grid;
}

.lexlistitem {
    width: 100%;
    height: 24px;
    cursor: pointer;
    color: var(--global-text-secondary);
    font-size: var(--global-font-size);
    border-radius: 4px;
    padding-inline: 4px;
    margin-block: 1px;
    line-height: 22px;
    align-content: center;
    display: flex;
    flex-direction: row;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.15s linear;
}

.lexlistitem a {
    float: left;
    line-height: 20px;
    margin-right: 4px;
}

.lexlistitem:hover {
    background-color: var(--global-color-tertiary);
}

.lexlistitem:active {
    color: rgba(216, 218, 230, 0.826);
}

.lexlistitem.selected {
    color: #fff;
    background-color: var(--global-color-accent);
}

/* Array Component */

.lexcomponent:has(.lexarrayitems),
.lexcomponent:has(.lexcheckboxsubmenu),
.lexcomponent:has(.lextogglesubmenu),
.lexcomponent:has(.lexcustomcontainer) {
    border-radius: 6px;
    transition: background-color 0.2s ease-out;
    display: flex;
    flex-wrap: wrap;
}

.lexcomponent:has(.lexarrayitems)[data-opened=true],
.lexcomponent:has(.lexcheckboxsubmenu)[data-opened=true],
.lexcomponent:has(.lextogglesubmenu)[data-opened=true],
.lexcomponent:has(.lexcustomcontainer)[data-opened=true] {
    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
}

.lexarray .lexcomponent {
    padding: 0px;
    width: 100% !important;
}

.lexarrayitems {
    width: 100%;
    padding: 2px;
    color: var(--global-text-secondary);
    font-size: var(--global-font-size);
    margin-top: -1px;
    grid-column: span 2;
}

.lexarrayitems .lexcomponentname {
    color: var(--global-text-tertiary);
    font-size: var(--global-font-size-sm);
    justify-content: center;
    margin-right: 0.4rem;
    font-weight: 600;
}

/* Tags Component */

.lextags {
    display: inline-flex;
    flex-wrap: wrap;
    line-height: 12px;
    background-color: var(--global-color-tertiary);
    border-radius: 8px;
    padding: var(--global-padding-xs);
}

.lextags input {
    width: 60%;
}

.lextags .lextag {
    padding: 6px;
    background-color: var(--global-color-primary);
    margin: 2px;
    border-radius: 6px;
    min-width: 16px;
    justify-content: center;
    color: var(--global-text-primary);
    display: inherit;
    gap: 0.2rem;
    font-size: var(--global-font-size);
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lextags .lextag a:hover {
    color: light-dark(var(--global-text-tertiary), var(--global-text-secondary));
    cursor: pointer;
}

/* Counter Component */

.lexcounter {
    display: flex;
    place-content: center;
}

.lexcounterbox {
    display: grid;
    text-align: -webkit-center;
    text-align: center;
    margin-left: 16px;
    margin-right: 16px;
}

.lexcounterbox .lexcountervalue {
    width: 100%;
    font-size: var(--global-font-size-xxl);
    font-weight: 700;
}

.lexcounterbox .lexcounterlabel {
    width: 100%;
    margin-top: -18px;
    font-size: var(--global-font-size-sm);
    color: var(--global-text-secondary);
}

/* Table Component */

.lextable {
    overflow-x: scroll;
}

.lextable table {
    width: 100%;
    border: 1px solid;
    border-color: var(--global-color-tertiary);
    border-collapse: separate;
    border-radius: 8px;
    border-spacing: 0px;
    overflow: hidden;
    background-color: var(--global-color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.lextable svg {
    color: var(--global-text-tertiary);
}

.lextable svg.success, .lextable svg.success path {
    color: #42d065 !important;
}

.lextable thead {
    display: table-header-group;
    border-color: inherit;
    border-collapse: separate;
}

.lextable tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    transition: transform 0.2s ease-in;
}

.lextable tr:has(input:checked) {
    background-color: var(--global-color-tertiary);
}

.lextable tr:hover, .lextable tr.dragging {
    background-color: var(--global-color-secondary);
}

.lextable tr.dragging {
    transition: none !important;
    pointer-events: none;
}

.lextable th, .lextable td {
    padding-block: var(--global-padding-sm);
    padding-inline: 12px;
    text-align: left;
    align-content: center;
}

.lextable td.empty-row {
    text-align: center;
    padding-block: 16px;
}

.lextable th {
    --th-color: var(--global-text-secondary);
    font-weight: 600;
    color: var(--th-color);
    font-size: var(--global-font-size);
    padding-block: 2px;
    cursor: pointer;
    transition: all 0.1s linear;
    white-space: nowrap;
    background-color: var(--global-color-tertiary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lextable th a {
    pointer-events: none;
}

.lextable th span {
    border-radius: 6px;
    padding: 0.4rem;
}

.lextable th span:hover {
    background-color: var(--global-color-secondary);
}

.lextable th a, .lextable td a {
    font-size: var(--global-font-size-xs) !important;
    display: flex;
    margin-left: 0px !important;
    place-self: center;
}

.lextable th a:active {
    transform: scale(1.01);
}

.lextable th:hover {
    color: color-mix(in srgb, var(--th-color), #000 10%);
}

.lextable th.centered, .lextable td.centered {
    text-align: center;
}

.lextable.centered th, .lextable.centered td {
    text-align: center;
}

.lextable th.sm, .lextable td.sm {
    width: 8%;
}

.lextable th .lexcheckbox, .lextable td .lexcheckbox {
    width: 1.25em;
    height: 1.25em;
}

.lextable th a {
    display: inline-block;
    transform: translate(6px, 3px);
}

.lextable td {
    justify-items: center;
    border-top: 2px solid;
    overflow: hidden;
    white-space: nowrap;
    border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
}

.lextable thead:first-child tr:first-child th:first-child, .lextable tbody:first-child tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.lextable thead:last-child tr:last-child th:first-child, .lextable tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 8px;
}

.lextable .lextablebuttons {
    display: inline-flex;
    gap: 0.2rem;
}

.lextable .lextablebuttons .lexicon {
    font-size: var(--global-font-size-sm) !important;
    padding: 0.2rem;
}

:root[data-theme="light"] .lextable table {
    box-shadow: none;
}

/* Custom Component */

.lexcustomitems {
    width: 100%;
    padding: 6px;
    color: var(--global-text-secondary);
    font-size: var(--global-font-size);
    margin-top: -1px;
    grid-column: span 2;
}

.lexcustomcontainer button.custom span {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

/* Knob Component */

.lexknob {
    padding: 8px;
}

.lexknob .knobcircle {
    background: rgb(62, 62, 62);
    background: linear-gradient(180deg, rgba(82, 82, 82, 1) 0%, rgba(40, 40, 40, 1) 100%);
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 3px 9px 2px #121212a9;
    --knob-snap-mark: 45deg;
}

/* Arc Indicator */
.lexknob .knobcircle::before {
    content: "";
    position: absolute;
    width: 125%;
    height: 125%;
    top: -12.5%;
    left: -12.5%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom-color: transparent;
}

/* Tick Marks */
.lexknob.show-ticks .knobcircle::after {
    content: "";
    position: absolute;
    width: 130%;
    height: 130%;
    top: -15.5%;
    left: -15.5%;
    border-radius: 50%;
    pointer-events: none;
    mask-image: radial-gradient(circle, transparent 60%, black 60%), conic-gradient(transparent -135deg,
            black -135deg 275deg,
            transparent 275deg);
    -webkit-mask-composite: intersect;
    mask-composite: intersect;
    background: repeating-conic-gradient(transparent 0deg,
            rgba(255, 255, 255, 0.4) 1deg 3deg,
            transparent 4deg calc(var(--knob-snap-mark) - 1deg));
    transform: rotate(-135deg);
}

.lexknob.sm .knobcircle {
    width: 48px;
    height: 48px;
}

.lexknob.bg .knobcircle {
    width: 81px;
    height: 81px;
}

.lexknob .innerknobcircle {
    background-color: rgba(62, 62, 62, 1);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    cursor: ns-resize;
}

.lexknob.disabled .innerknobcircle {
    cursor: not-allowed;
}

.lexknob.sm .innerknobcircle {
    width: 39px;
    height: 39px;
}

.lexknob.bg .innerknobcircle {
    width: 73px;
    height: 73px;
}

.lexknob .knobmarker {
    background-color: var(--global-color-accent);
    filter: brightness(1.5);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 6px;
}

.lexknob.disabled .knobmarker {
    background-color: var(--global-text-tertiary);
}

.lexknob.disabled .knobmarker {
  background-color: var(--global-text-tertiary);
}

.lexknob.sm .knobmarker {
    width: 5px;
    height: 5px;
}

.lexknob.bg .knobmarker {
    width: 7px;
    height: 7px;
    margin-top: 8px;
}

:root[data-theme="light"] .lexknob .knobcircle {
    background: rgb(182, 182, 182);
    background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(160, 160, 160, 1) 100%);
    box-shadow: 0px 0px 8px 2px #a3a3a379;
}

/* Arc Indicator */
:root[data-theme="light"] .lexknob .knobcircle::before {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Tick Marks */
:root[data-theme="light"] .lexknob.show-ticks .knobcircle::after {
    background: repeating-conic-gradient(transparent 0deg,
            rgba(50, 50, 50, 0.493) 1deg 3deg,
            transparent 4deg calc(var(--knob-snap-mark) - 1deg));
}

:root[data-theme="light"] .lexknob .innerknobcircle {
    background-color: rgb(182, 182, 182);
}

:root[data-theme="light"] .lexknob .knobmarker {
    background-color: var(--global-color-accent-dark);
    filter: brightness(1.5);
}

:root[data-theme="light"] .lexknob.disabled .knobmarker {
    background-color: var(--global-text-primary);
}

/* Icon swap */

.swap {
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    place-self: center;
    display: inline-grid;
    position: relative;
    pointer-events: none;
}

.swap input {
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: 100%;
    transform: translate(-0.2rem, -0.2rem);
    background: none !important;
}

.swap > * {
    grid-row-start: 1;
    grid-column-start: 1;
    transition-property: transform,rotate,opacity;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.swap .swap-on,.swap .swap-indeterminate,.swap input:indeterminate~.swap-on,.swap input:is(:checked,:indeterminate)~.swap-off {
    opacity: 0;
}

.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate {
    opacity: 1;
}

.swap .swap-on,.swap .swap-indeterminate, .swap input:indeterminate~.swap-on {
    rotate: 45deg;
}

.swap input:is(:checked,:indeterminate)~.swap-on, .swap.swap-active .swap-on {
    rotate: none;
}

.swap input:is(:checked,:indeterminate)~.swap-off, .swap.swap-active .swap-off {
    rotate: -45deg;
}

/** Timeline */

.lextimeline {
    flex-direction: column;
    color: var(--global-text-primary);
    background-color: var(--global-primary-color);
    height: 100%;
}

.lextimeline *::-webkit-scrollbar {
    display: none;
}

.lextimeline .lexbuttonscontainer {
    position: absolute;
    padding: 0 10px;
}

.lextimeline .lexcomponent:has(.lexbutton:not(.array)) {
    padding: 1px;
}

.lextimeline .lexinlinecomponents {
    padding-right: 10px;
}

.lextimeline .lextree {
    margin: 0px !important;
}

.lextimeline .lextree .lextreeitem {
    margin: 0px;
}

.lextimeline .lextree ul {
    margin: 0;
    padding-bottom: 0px;
    padding-top: 0px;
    font-size: var(--global-font-size);
}

.lextimeline .lexsplitbar.vertical {
    position: unset;
    width: unset;
    height: unset;
}

/**/
.lexmin {
    display: inline-block;
    color: var(--global-color-accent-light);
    background: var(--global-color-primary);
    border-radius: 8px;
    padding: 4px;
    position: absolute;
    transition: 0.3s;
    font-size: initial;
    cursor: pointer;
}

.lexmin.horizontal {
    margin-top: 48px;
    margin-left: -12px;
    height: fit-content;
}

.lexmin.vertical {
    margin-top: -12px;
    margin-left: 12px;
}

/* Height, Width transitions */

.lexarea .minimize-vertical, .lexarea .maximize-vertical {
    transition: height 0.1s ease-out;
}

.lexarea .minimize-horizontal, .lexarea .maximize-horizontal {
    transition: width 0.1s ease-out;
}

/* Opacity transitions */

.lexarea .fadein-vertical {
    animation-name: fadein;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

.lexarea .fadeout-vertical {
    animation-name: fadeout;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

.lexarea .fadein-horizontal {
    animation-name: fadein;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

.lexarea .fadeout-horizontal {
    animation-name: fadeout;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    from {
        opacity: 0%;
    }

    25% {
        opacity: 75%;
    }

    to {
        opacity: 100%;
    }
}

@keyframes fadeout {
    from {
        opacity: 100%;
    }

    25% {
        opacity: 25%;
    }

    to {
        opacity: 0%;
    }
}

/* Overlay area */

.overlay-top {
    position: absolute;
    top: 0;
}

.overlay-bottom {
    position: absolute;
    bottom: 0;
}

.overlay-left {
    position: absolute;
    left: 0;
    top: 0;
}

.overlay-right {
    position: absolute;
    right: 0;
    top: 0;
}

.lexarea.overlay-bottom,
.lexarea.overlay-top,
.lexarea.overlay-left,
.lexarea.overlay-right,
.overlay-bottom .lexarea,
.overlay-top .lexarea,
.overlay-left .lexarea,
.overlay-right .lexarea,
.overlay-bottom .lextimeline,
.overlay-top .lextimeline,
.overlay-left .lextimeline,
.overlay-right .lextimeline,
.overlay-bottom .lextimelinearea,
.overlay-top .lextimelinearea,
.overlay-left .lextimeline,
.overlay-right .lextimelinearea {

    background-color: var(--global-color-primary);
}

/* Asset Browser */

.lexassetbrowser {
    min-height: 190px;
    height: 100%;
    border-radius: 6px;
    background-color: var(--global-color-primary);
}

.lexassetbrowser .lexarea {
    background: none;
}

.lexassetbrowser .lexsplitbar.horizontal {
    position: relative;
    height: 100%;
    border-radius: 0px;
    left: 0 !important;
    top: 0;
    background-color: var(--global-color-secondary);
}

.lexassetbrowser .lexsplitbar.horizontal:hover {
    background-color: var(--global-text-secondary);
}

.lexassetbrowser .lexsplitbar.vertical {
    position: unset;
    width: unset;
    height: unset;
}

.lexassetscontent.dragging {
    background-color: var(--global-intense-background);
}

ul.lexassetscontent {
    /* height: 100%; */
    -webkit-text-size-adjust: 100%;
    padding: 0 1em;
    margin: 0;
    font-size: var(--global-font-size);
    color: #AAA;
    position: relative;
    overflow: auto;
}

.lexassetscontent.compact {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: 0.5rem;
}

.lexassetscontent.list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.lexassetscontent li {
    -webkit-text-size-adjust: 100%;
    font-size: var(--global-font-size);
    color: #AAA;
    -webkit-user-drag: element;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 10em;
    height: 11.4em;
    display: inline-block;
    vertical-align: top;
    margin: 0.5em;
    margin-top: 0.75em;
    padding: 0;
    box-shadow: 0 0 2px rgba(0, 0, 0, .14);
    overflow: hidden;
    background-color: var(--global-color-quaternary);
    cursor: pointer;
    text-align: center;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    border-top: 4px solid rgba(0, 0, 0, 0);
}

.lexassetscontent .lexitemdesc {
    position: fixed;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--global-text-secondary);
    color: var(--global-color-primary);
    font-size: var(--global-font-size);
    border-radius: 6px;
    display: none;
    opacity: 0;
    z-index: 102;
    padding: 2px 6px;
    transition: opacity ease-in 0.1s;
    pointer-events: none;
}

.lexassetscontent li:hover + .lexitemdesc {
    opacity: 1;
}

.lexassetscontent.list li, .lexassetscontent.compact li {
    width: 100%;
    height: 1.8em;
    border-top: 0px;
    border-left: 4px solid transparent;
    border-radius: 4px;
    margin: 0;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

.lexassetscontent .asset-file-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 20px);
    padding-top: 16px;
}

.lexassetscontent .asset-file-preview text {
    font-size: 4rem;
    text-anchor: middle;
    font-family: var(--global-code-font);
    font-feature-settings: "ss02", 'ss19',  "ss20";
    font-feature-settings: "ss02", 'ss19',  "ss20";
    font-weight: 800;
    color: var(--global-text-tertiary);
}

.lexassetscontent li.image {
    border-color: rgb(239, 188, 78);
}

.lexassetscontent li.script {
    border-color: rgb(207, 127, 36);
}

.lexassetscontent li.json {
    border-color: rgb(163, 213, 225);
}

.lexassetscontent li.mesh {
    border-color: rgb(156, 68, 68);
}

.lexassetscontent li.clip {
    border-color: rgb(176, 97, 187);
}

.lexassetscontent li.sigml {
    border-color: rgb(154, 188, 101);
}

.lexassetscontent li.video {
    border-color: rgb(84, 119, 214);
}

.lexassetscontent li:hover {
    outline: 2px solid var(--global-color-accent);
}

.lexassetscontent li.selected {
    transition: none !important;
    outline: 2px solid var(--global-color-accent);
    font-weight: bold;
}

.lexassetscontent li .lexassettitle {
    position: absolute;
    width: 100%;
    height: 24px;
    bottom: 0px;
    -webkit-text-size-adjust: 100%;
    font-size: var(--global-font-size);
    color: var(--global-text-primary);
    cursor: pointer;
    text-align: center;
    display: block;
    padding: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-content: center;
    background-color: var(--global-intense-background);
    transition: all 0.1s;
    z-index: 1;
}

.lexassetscontent.list li .lexassettitle, .lexassetscontent.compact li .lexassettitle {
    width: 100%;
    height: 100%;
    text-align: left;
    padding-left: 2em;
}

.lexassetscontent li .lexassetinfo {
    -webkit-text-size-adjust: 100%;
    color: #999;
    position: absolute;
    overflow: hidden;
    text-align: left;
    padding: 3px;
    top: 0;
    transition: all 0.1s;
    display: none;
}

.lexassetscontent.list li .lexassetinfo, .lexassetscontent.compact li .lexassetinfo {
    display: block;
    right: 6px;
    z-index: 1;
}

.lexassetscontent.list li:has(.lexcheckbox) .lexassetinfo, .lexassetscontent.compact li:has(.lexcheckbox) .lexassetinfo {
    display: block;
    right: 32px;
    z-index: 1;
}

.lexassetscontent li .lexcheckbox {
    position: absolute;
    display: block;
    z-index: 100;
    width: 1.15em;
    height: 1.15em;
}

.lexassetscontent.list li .lexcheckbox, .lexassetscontent.compact li .lexcheckbox {
    right: 3px;
    top: 3px;
}

.lexassetscontent li.selected .lexassettitle {
    color: #f5f5f5;
    text-shadow: 0 0 3px black;
    background-color: var(--global-color-accent);
}

.lexassetscontent li img {
    -webkit-text-size-adjust: 100%;
    cursor: pointer;
    text-align: center;
    color: white;
    border: 0;
    max-width: 10em;
    max-height: 10em;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s;
}

.lexassetscontent li video {
    z-index: 1;
    object-fit: cover;
    height: calc(100% - 24px);
}

.lexassetscontent.list img, .lexassetscontent.compact img {
    width: unset;
    object-fit: contain;
    float: left;
    z-index: 1;
    position: relative;
}

.lexassetscontent li.folder img {
    transform: translateY(-6px);
}

.lexassetscontent.list li.folder img, .lexassetscontent.compact li.folder img {
    transform: scale(0.9);
}

.lexassetscontent li:hover img {
    transform: scale(1.12);
}

/* Tour */

.tour-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1f1f1fe7;
    --webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 99;
    clip-path: url(#svgTourClipPath);
}

.tour-ref-mask {
    position: absolute;
    background-color: #1f1f1fe7;
    --webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 100;
    mask: url(#svgTourReferenceMask);
}

.tour-step-indicator {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--global-text-quaternary);
    display: inline-flex;
}

.tour-step-indicator.active {
    background-color: var(--global-text-primary);
}

/* Skeleton */

@keyframes skeletonHide {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
        scale3d(1, 1, 1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 12.5%, 0)
        scale3d(0.75, 0.75, 0.75);
    }
}

.lexskeleton[data-closed] {
    animation: skeletonHide 0.2s forwards;
}

/* Shimmer keyframes */
@keyframes skeleton-shimmer {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.lexskeleton *.lexskeletonpart {
    position: relative;
    overflow: hidden;
    background-color: var(--global-color-tertiary);
    border-radius: 0.375rem;
    pointer-events: none;
    animation: skeleton-shimmer 2.0s ease-in-out infinite;
}

/* Code Editor */

.codebasearea {
    display: flex;
    position: relative;
    /* overflow: inherit; */
    background-color: var(--global-color-secondary);
}

.codebasearea * {
    letter-spacing: 0em !important;
}

.codebasearea .lexareatabs {
    padding: 0px;
    margin: 0px;
    gap: 0;
    background-color: var(--global-color-primary);
}

.codebasearea .lexareatab {
    padding: 5px;
    border-radius: 0px !important;
    margin: 0px !important;
    border: none;
    background-color: var(--global-color-secondary) !important;
    border-bottom: 1px solid transparent;
    transition: none;
    display: flex !important;
}

.codebasearea .lexareatab:hover {
    background-color: var(--global-color-tertiary) !important;
}

.codebasearea .lexareatab:first-child {
    border-top-left-radius: 8px !important;
}

.codebasearea .lexareatab:last-child {
    border-top-right-radius: 8px !important;
}

.codebasearea .lexareatab.selected {
    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background)) !important;
    border-bottom: 1px solid var(--global-color-accent);
    color: var(--global-text-primary) !important;
}

.codebasearea .lexareatab i {
    width: 12px;
    font-size: var(--global-font-size-sm);
    margin-right: 6px;
    align-content: center;
}

.codebasearea .lexareatab img {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    align-content: center;
}

.lexcodeeditor ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: none;
}

.lexcodeeditor ::-webkit-scrollbar-thumb {
    background: #8c8c909c;
}

.lexcodeeditor ::-webkit-scrollbar-thumb:hover {
    background: #afafb4c2;
}

.lexcodeeditor {
    outline: none;
    overflow: hidden;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: inherit;
}

.lexcodeeditor .lexareatabscontent {
    overflow: hidden;
}

.lexcodetabinfo {
    background-color: var(--global-color-secondary);
    position: absolute;
    z-index: 3;
    bottom: 0px;
    justify-items: end;
    padding-inline: 1rem;
}

.lexcodegutter {
    width: 48px;
    background-color: inherit;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.lexcodeeditor .lexcodearea {
    width: 100%;
    background-color: inherit;
    overflow: scroll;
}

.lexcodeeditor .lexcodearea::-webkit-scrollbar {
    display: none;
}

.lexcodeeditor .lexcodearea.dragging {
    background-color: var(--global-color-secondary);
}

.lexcodeeditor .code {
    cursor: text;
    font-family: var(--global-code-font);
    font-feature-settings: "ss02", 'ss19',  "ss20";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--code-editor-font-size);
    position: relative;
}

.codechar {
    font-family: var(--global-code-font);
    font-feature-settings: "ss02", 'ss19',  "ss20";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--code-editor-font-size);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.lexcodeeditor pre {
    -webkit-text-size-adjust: 100%;
    font-family: var(--global-code-font);
    font-feature-settings: "ss02", 'ss19',  "ss20";
    font-size: var(--code-editor-font-size);
    cursor: text;
    box-sizing: border-box;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    margin: 0px 0px;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: var(--global-text-primary);
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    height: var(--code-editor-row-height);
    pointer-events: none;
}

.lexcodeeditor pre.active-line {
    background-color: #333437a9;
}

.lexcodeeditor.disabled pre.active-line {
    background-color: transparent;
}

.lexcodeeditor pre.added {
    background-color: #40db212f !important;
}

.lexcodeeditor pre.removed {
    background-color: #db21212f !important;
}

.lexcodeeditor pre.debug {
    background-color: #fffb002f !important;
}

.lexcodeeditor.disabled .lexareatab {
    cursor: default;
}

.lexcodeeditor span {
    -webkit-text-size-adjust: 100%;
    cursor: text;
    font-family: inherit;
    font-size: inherit;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    display: inline-block;
}

.lexcodeeditor pre .line-gutter {
    color: var(--global-text-tertiary);
    width: 48px;
    height: var(--code-editor-row-height);
    font-size: var(--code-editor-font-size);
    font-weight: 400;
    line-height: var(--code-editor-row-height);
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: sticky;
    left: 0;
    z-index: 1;
}

.lexcodeeditor pre.active-line .line-gutter {
    color: var(--global-text-primary);
}

.lexcodeeditor.no-gutter pre .line-gutter {
    opacity: 0;
}

.lexcodeeditor .cursors,
.lexcodeeditor .selections {
    -webkit-text-size-adjust: 100%;
    font-family: monospace;
    color: #AAA !important;
    font-size: 16px;
    cursor: text;
    box-sizing: border-box;
    visibility: hidden;
    margin: 0;
    padding: 0;
    position: relative;
    pointer-events: none;
}

.lexcodeeditor .cursors.show,
.lexcodeeditor .selections.show {
    visibility: visible;
}

.lexcodeeditor .cursors .cursor {
    -webkit-text-size-adjust: 100%;
    font-family: monospace;
    font-size: 16px;
    cursor: text;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-right: none;
    width: 0;
    height: var(--code-editor-row-height);
    position: absolute;
    border-left: 3px solid var(--global-text-primary) !important;
    z-index: 1 !important;
    opacity: 0.6;
    left: 0px;
    top: 0px;
}

.lexcodescrollbar {
    width: 10px;
    position: absolute;
    background-color: transparent;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 1 !important;
    right: 0px;
    pointer-events: none;
}

.lexcodescrollbar.horizontal {
    width: calc(100% - 48px);
    height: 10px;
    bottom: 0px;
    left: 48px; /* gutter offset */
}

.lexcodescrollbar div {
    /* thumb */
    background-color: #bbbbbb3d !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-right: none;
    position: absolute;
    z-index: 0 !important;
    top: 0px;
    width: 10px;
    height: 10px;
    transition: linear 0.1s background-color;
    pointer-events: all;
}

.lexcodescrollbar div:hover {
    /* thumb */
    background-color: #bbbbbb8c !important;
}

.lexcodeeditor .lexcodeselection,
.lexcodeeditor .lexcodesearchresult {
    -webkit-text-size-adjust: 100%;
    font-family: monospace;
    color: #AAA !important;
    font-size: 15px;
    cursor: text;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-right: none;
    border-radius: 1px;
    position: absolute;
    z-index: 0 !important;
    left: 0px;
    top: 0px;
    width: 100px;
    height: var(--code-editor-row-height);
    background-color: var(--global-color-accent);
    opacity: 0.4;
}

.lexcodeeditor .lexcodesearchresult {
    background-color: #f5f115;
    opacity: 0.5;
}

.lexcodeeditor .searchbox {
    background-color: var(--global-color-secondary);
    position: absolute;
    right: 6px;
    top: 26px;
    z-index: 100;
    border-radius: 4px;
    border: 1px solid var(--global-color-tertiary);
    box-shadow: 0 0px 4px #101010;
    overflow-y: scroll;
    transform: translateY(-96px);
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.lexcodeeditor .searchbox.opened {
    transform: translateY(0px);
    opacity: 1;
}

.lexcodeeditor .searchbox .lexpanel span {
    height: 11px;
}

.lexcodeeditor .autocomplete {
    background-color: var(--global-medium-background);
    width: 256px;
    max-height: 132px;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: 100;
    border-radius: 4px;
    border: 1px solid var(--global-color-tertiary);
    box-shadow: 0 0px 4px #101010;
    overflow-x: hidden;
    overflow-y: scroll;
}

.lexcodeeditor .autocomplete.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.lexcodeeditor .autocomplete.show {
    visibility: visible;
}

.lexcodeeditor .autocomplete pre {
    margin: 0;
    pointer-events: unset;
    cursor: default;
    height: 22px;
    padding-left: 6px;
    display: flex;
    align-items: center;
}

.lexcodeeditor .autocomplete pre:hover {
    background-color: var(--global-color-tertiary);
    cursor: pointer;
}

.lexcodeeditor .autocomplete pre.selected {
    background-color: var(--global-color-accent);
}

.lexcodeeditor .autocomplete pre.selected svg {
    color: white !important;
}

.lexcodeeditor .autocomplete pre span {
    cursor: inherit;
}

.lexcodeeditor .autocomplete pre span.word-highlight {
    color: var(--global-color-accent-light);
}

.lexcodeeditor .autocomplete pre.selected span.word-highlight {
    color: #95a0e1;
}

.lexcodesnippet {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.6);
    border: 2px solid var(--global-color-primary);
}

.lexcodesnippet .lexareatabs.row {
    border-radius: 0;
}

.lexcodesnippet .lexwindowbuttons {
    width: 100px;
    padding-inline: 16px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.lexcodesnippet .lexwindowbuttons span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    cursor: default;
}

/* Common */

.cm-str { color: #ca7d59; }   /* string */
.cm-std { color: #d181d1; }   /* statements & declarations */
.cm-kwd { color: #2194ce; }   /* keyword */
.cm-com { color: #5cab5a; }   /* comment */
.cm-typ { color: #36c0b0; }   /* type */
.cm-dec { color: #b1ce9b; }   /* decimal */

.cm-bln.javascript { color: #d2d6f5; }   /* builtin */
.cm-sym.javascript { color: #e7ded2; }  /* symbol */
.cm-mtd.javascript { color: #e9d98a }   /* method */

.cm-mtd.typescript { color: #e9d98a }   /* method */
.cm-enu.typescript { color: #4cacff }   /* enums */

.cm-bln.c { color: #d44141; }   /* builtin */
.cm-dec.c { color: #2ddf53; }   /* decimal */
.cm-sym.c { color: #e7ded2; }   /* symbol */
.cm-mtd.c { color: #7a9ae0 }    /* method */
.cm-ppc.c { color: #969696 }    /* preprocessor */

.cm-bln.cpp { color: #d44141; }   /* builtin */
.cm-dec.cpp { color: #2ddf53; }   /* decimal */
.cm-sym.cpp { color: #e7ded2; }   /* symbol */
.cm-mtd.cpp { color: #7a9ae0 }    /* method */
.cm-ppc.cpp { color: #969696 }    /* preprocessor */
.cm-enu.cpp { color: #b1ce9b }    /* enums */

.cm-sym.cmake { color: #cf6dcf; }  /* symbol */

.cm-kwd.css { color: #e8be53; }   /* keyword */
.cm-typ.css { color: #b7c3ec; }   /* type */
.cm-bln.css { color: #2194ce; }   /* builtin */
.cm-sym.css { color: #f9d620; }   /* symbol */
.cm-mtd.css { color: #e0cc68; }   /* method */

.cm-sym.json { color: #cf6dcf; }  /* symbol */

.cm-sym.glsl { color: #f9cb20; }  /* symbol */
.cm-mtd.glsl { color: #e0cc68; }  /* method */

.cm-mtd.wgsl { color: #dfe093; }  /* method */
.cm-sym.wgsl { color: #f9cb20; }  /* symbol */
.cm-ppc.wgsl { color: #99caf1; }  /* preprocessor */
.cm-bln.wgsl { color: #bebebe; }  /* builtin */

.cm-sym.rust { color: #e7ded2; }  /* symbol */
.cm-mtd.rust { color: #e0cc68 }   /* method */

.cm-sym.python { color: #e7ded2; }  /* symbol */
.cm-mtd.python { color: #e0cc68 }   /* method */

.cm-sym.batch { color: #dfd85e; }   /* symbol */

.cm-bln.html { color: #a1d2f0; }    /* builtin */
.cm-sym.html { color: #929292; }    /* symbol */

.cm-bln.xml { color: #a1d2f0; }    /* builtin */
.cm-sym.xml { color: #929292; }    /* symbol */

.cm-bln.markdown { color: #a1d2f0; }  /* builtin */

.cm-sym.php { color: #cf6dcf; }  /* symbol */
.cm-mtd.php { color: #ddce80 }   /* method */
.cm-bln.php { color: #ddce80; }  /* builtin */
.cm-var.php { color: #88bde9; }  /* variable */

:root[data-theme="light"] .lexcodeeditor pre.active-line {
    background-color: #e4e0e0ab;
}

:root[data-theme="light"] .lexcodeeditor.disabled pre.active-line {
    background: none;
}

:root[data-theme="light"] .lexcodescrollbar div {
    /* thumb */
    background-color: #8383839d !important;
}

:root[data-theme="light"] .lexcodescrollbar div:hover {
    /* thumb */
    background-color: #5e5e5ea9 !important;
}

:root[data-theme="light"] .cm-str { color: #a15e3e; }   /* string */
:root[data-theme="light"] .cm-std { color: #a753c0; }   /* statements & declarations */
:root[data-theme="light"] .cm-kwd { color: #1967d2; }   /* keyword */
:root[data-theme="light"] .cm-com { color: #188038; }   /* comment */

:root[data-theme="light"] .cm-typ.javascript { color: #0b9484; }  /* type */
:root[data-theme="light"] .cm-dec.javascript { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-sym.javascript { color: #333333; }  /* symbol */
:root[data-theme="light"] .cm-mtd.javascript { color: #539ac7 }   /* method */

:root[data-theme="light"] .cm-typ.c { color: #0b9484; }   /* type */
:root[data-theme="light"] .cm-bln.c { color: #333333; }   /* builtin */
:root[data-theme="light"] .cm-dec.c { color: #c5221f; }   /* decimal */
:root[data-theme="light"] .cm-sym.c { color: #333333; }   /* symbol */
:root[data-theme="light"] .cm-mtd.c { color: #539ac7 }    /* method */
:root[data-theme="light"] .cm-ppc.c { color: #626262 }    /* preprocessor */

:root[data-theme="light"] .cm-typ.cpp { color: #0b9484; }   /* type */
:root[data-theme="light"] .cm-bln.cpp { color: #333333; }   /* builtin */
:root[data-theme="light"] .cm-dec.cpp { color: #c5221f; }   /* decimal */
:root[data-theme="light"] .cm-sym.cpp { color: #333333; }   /* symbol */
:root[data-theme="light"] .cm-mtd.cpp { color: #539ac7 }    /* method */
:root[data-theme="light"] .cm-ppc.cpp { color: #626262 }    /* preprocessor */

:root[data-theme="light"] .cm-sym.cmake { color: #a753c0; }  /* symbol */

:root[data-theme="light"] .cm-kwd.css { color: #c49319; }   /* keyword */
:root[data-theme="light"] .cm-typ.css { color: #539ac7; }   /* type */
:root[data-theme="light"] .cm-bln.css { color: #2194ce; }   /* builtin */
:root[data-theme="light"] .cm-dec.css { color: #c5221f; }   /* decimal */
:root[data-theme="light"] .cm-sym.css { color: #a753c0; }   /* symbol */

:root[data-theme="light"] .cm-dec.json { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-sym.json { color: #a753c0; }  /* symbol */

:root[data-theme="light"] .cm-typ.glsl { color: #0b9484; }  /* type */
:root[data-theme="light"] .cm-dec.glsl { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-mtd.glsl { color: #539ac7; }  /* method */
:root[data-theme="light"] .cm-sym.glsl { color: #a753c0; }  /* symbol */

:root[data-theme="light"] .cm-typ.wgsl { color: #0b9484; }  /* type */
:root[data-theme="light"] .cm-dec.wgsl { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-mtd.wgsl { color: #539ac7; }  /* method */
:root[data-theme="light"] .cm-sym.wgsl { color: #a753c0; }  /* symbol */
:root[data-theme="light"] .cm-ppc.wgsl { color: #626262; }  /* preprocessor */

:root[data-theme="light"] .cm-typ.rust { color: #0b9484; }  /* type */
:root[data-theme="light"] .cm-dec.rust { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-sym.rust { color: #333333; }  /* symbol */
:root[data-theme="light"] .cm-mtd.rust { color: #539ac7 }   /* method */

:root[data-theme="light"] .cm-typ.python { color: #0b9484; }  /* type */
:root[data-theme="light"] .cm-dec.python { color: #c5221f; }  /* decimal */
:root[data-theme="light"] .cm-sym.python { color: #333333; }  /* symbol */
:root[data-theme="light"] .cm-mtd.python { color: #539ac7 }   /* method */

:root[data-theme="light"] .cm-dec.batch { color: #c5221f; }   /* decimal */
:root[data-theme="light"] .cm-sym.batch { color: #a753c0; }   /* symbol */

:root[data-theme="light"] .cm-bln.html { color: #539ac7; }    /* builtin */
:root[data-theme="light"] .cm-sym.html { color: #696969; }    /* symbol */

:root[data-theme="light"] .cm-bln.xml { color: #a1d2f0; }    /* builtin */
:root[data-theme="light"] .cm-sym.xml { color: #929292; }    /* symbol */

:root[data-theme="light"] .cm-bln.markdown { color: #a1d2f0; }  /* builtin */

/* Node Graph */

.lexgraph {
    overflow: hidden;
    position: relative;
    outline: none;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA4lJREFUWEftl1FIk1EUx/9qOGtNU4wkC1RQEc2hD9P5oigqH1PxIQqhgYI+iHtIE0ZQKoZo6BDniFScsIcgCSEILMPhJBRCh6G+qKSopHy2iVnOudniyDdZY3NTJ/rghcvGuPvO7/zP/557Pz+c8/A75/i4cAAERNPGzTMXyFEBfwAB6+vrqoiIiMcA9gFYzhrEEeAKgKC1tbX6nZ2dh3t7e3UJCQnvAJgBWM8KxBkgWKvV3g8KCnoZFxfHZ1l2fHV1tS4vL+8rgD1OFZ+WxREgAMCN0tLSex0dHR9DQkJ4ra2tkMlkFoPBoGppaWlTqVQGrix/fUXhCEDfQwDcMRqNY9nZ2YKpqSkkJydDoVBYExMTN7a3t5vi4+M1AHZ9VRbnbXgdQOTs7OzbtrY2YV9f32GiUqkU7e3tFpPJNL6ystKckZExyvmDzHri4QxwFUDE2NhYvV6vL5HJZIHOT6ay1NTU2FiW7RoYGFBUVVWtnKYszgAU8KZarS5JSkpqEIlEfFepRUdHo7e3dzclJWVrc3NTERMT8/qkZXEGICOGSSQSYX9//yCfz6et6XYUFxdDrVbTNp1YWlpqT01NHTxuWZwB7Ea8y7LsF4ZhgicnJ90C8Hg8ZGZmQiwWo6GhAQaD4VV4ePgTDoK6qcfh6iw4MOL09PSbzs7O1O7u7v8eEhsbC4lEgtzcXLNYLPa32WyW5eXlaaPR+Hlubm64srJyAsAOAK+2qisAMuItnU73fH5+/lF5efmhEaurq9HY2GhZWFhYWlxcnNRqtd9UKtUsgF8AqEf8BLDF+eHEClDA8J6engcikahJKBReIwnS0tIwMjKyL5fLXyiVSqoLBfrDZWsCQJMyt/cIj/LTAlcKkBFDs7KykoaGhoYDAwPpkIJOp9u1Wq0fcnJyOgFscFlTMGrRdFbQpJ7glfR2OlcAjkbUMQwTWlBQgLKystWoqCgpgGVObsqYgh4roLMs7i4kZMTbMzMzGqVSmdbV1UXt+Gltbe17AD8A/PbVweQO4MCIo6OjcoFAIDWbzZ/S09ObAVDX2+Rk96rGnha5AyAjhmk0msL8/PxnDMOU6fX67wBYzmxeOdxTcHcmpN/JiILCwsLIiooKcVFR0TCX+bavpD/KhHYwHt2QAFA7JqfbHe9NYl6vOepWfHBHBECftL1o+kx6Twp4ncFpF16494LTJnTs/18qcKnAPygqQzAAgQjBAAAAAElFTkSuQmCC) 4 4, auto !important;
}

.lexgraph .lexselect ul {
    max-height: unset;
}

.lexgraph .lexgraphnodes,
.lexgraph .lexgraphlinks {
    width: 100%;
    height: 100%;
    position: absolute;
}

.lexgraph .lexgraphlinks {
    pointer-events: none;
}

.lexgraph .lexgraphlinks path {
    stroke-width: 3px;
    stroke-opacity: 0.9;
}

.lexgraph .lexgraphlinks path.running {
    stroke-dasharray: 5px;
    stroke-linecap: round;
    stroke-dashoffset: 50;
    animation: dash 1s linear;
    animation-iteration-count: infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.lexgraph svg {
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.lexgraph .box-selection-svg {
    stroke-width: 3px;
    stroke: var(--global-color-accent);
    border-radius: 8px;
    fill: var(--global-color-accent);
    fill-opacity: 0.2;
}

.lexgraph .box-selection-svg.removing {
    stroke-dasharray: 6px;
    stroke-linecap: round;
}

.lexgraphnode {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    min-width: 96px;
    min-height: 32px;
    border-radius: 10px;

    /* background-color: rgba(var(--graphnode-background), 0.75); */
    background: linear-gradient(15deg, #161616da 10%, #080808da);
    background-color: unset;
    background-origin: border-box;

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 3px solid var(--global-color-transparent);
    transition: border 0.05s linear;
    padding: 4px;
}

.lexgraphnode.math {
    background: linear-gradient(15deg, #0687d1da 10%, #00ffccda);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.logic {
    background: linear-gradient(15deg, #FB4D3Dda 10%, #A74482da);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.inputs {
    background: linear-gradient(15deg, #84e100da 10%, #79a095da);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.variables {
    background: linear-gradient(15deg, #f14343da 10%, #e7b88bda);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.events {
    background: linear-gradient(15deg, #ec49d7da 10%, #8dc0b8da);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.function {
    background: linear-gradient(15deg, #d19b06da 10%, #ff7b00da);
    background-color: unset;
    background-origin: border-box;
}

.lexgraphnode.selected {
    border: 3px solid var(--global-color-accent-dark);
    border: 3px solid #ffc107;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .14);
}

.lexgraphnode .lexgraphnodeheader,
.lexgraphnode .lexgraphnodeproperties {
    font-family: var(--global-title-font);
    font-weight: 600;
    font-size: var(--global-font-size);
    color: #fff;
    text-shadow: 0px 0px 2px #1b1b1bdc;
    border-bottom: 1px solid #ffffff46;
    margin-bottom: 2px;
    pointer-events: none;
    text-align: -webkit-center;
    text-align: center;
    margin-left: -7px;
    width: calc(100% + 14px);
}

.lexgraphnode.selected .lexgraphnodeheader,
.lexgraphnode.selected .lexgraphnodeproperties {
    margin-left: -4px;
    width: calc(100% + 8px);
}

.lexgraphnode .lexgraphnodeproperties {
    pointer-events: all;
}

.lexgraphnode .lexgraphnodeios {
    display: flex;
    pointer-events: none;
}

.lexgraphnode .lexgraphnodeios .lexgraphnodeinputs {
    margin-right: 6px;
}

.lexgraphnode .lexgraphnodeios .lexgraphnodeoutputs {
    margin-left: 6px;
}

.lexgraphnode .lexgraphnodeio {
    font-family: var(--global-title-font);
    font-weight: 600;
    font-size: var(--global-font-size-sm);
    color: #d9d9e3;
    text-shadow: 0px 1px 6px #22222283;
    min-height: 18px;
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.lexgraphnode .lexgraphnodeio.iooutput {
    justify-content: right;
}

.lexgraphnode .lexgraphnodeio .io__type {
    font-size: calc(var(--global-font-size-xs) - 1px);
    font-weight: 700;
    line-height: 1;
    min-width: 11px;
    max-width: 11px;
    min-height: 10px;
    max-height: 10px;
    background-color: #afafaf;
    align-self: center;
    border-radius: 3px;
    text-align: -webkit-center;
    text-align: center;
    border: 1px solid #afafaf6b;
    color: var(--global-color-primary);
    pointer-events: all;
}

.lexgraphnode .lexgraphnodeio .io__type span {
    pointer-events: none;
}

.lexgraphnode .lexgraphnodeio .io__typedesc {
    position: absolute;
    margin-left: -30px;
    font-weight: 600;
    background-color: #afafaf;
    color: var(--global-color-primary);
    font-size: var(--global-font-size-xs);
    border-radius: 4px;
    width: 28px;
    text-align: center;
    opacity: 0;
    transition: opacity ease-in 0.1s;
}

.lexgraphnode .lexgraphnodeio .io__typedesc.output {
    margin-right: -30px;
}

.lexgraphnode .lexgraphnodeio .io__type.vec2,
.lexgraphnode .lexgraphnodeio .io__typedesc.vec2 {
    background-color: #ecea4c;
}

.lexgraphnode .lexgraphnodeio .io__type.vec3,
.lexgraphnode .lexgraphnodeio .io__typedesc.vec3 {
    background-color: #ee87e5;
}

.lexgraphnode .lexgraphnodeio .io__type.vec4,
.lexgraphnode .lexgraphnodeio .io__typedesc.vec4 {
    background-color: #9d56d8;
}

.lexgraphnode .lexgraphnodeio .io__type.string,
.lexgraphnode .lexgraphnodeio .io__typedesc.string {
    background-color: #79cc9c;
}

.lexgraphnode .lexgraphnodeio .io__type.mat,
.lexgraphnode .lexgraphnodeio .io__typedesc.mat {
    background-color: #56a8d8;
}

.lexgraphnode .lexgraphnodeio .io__type.output {
    margin-right: unset;
    margin-left: 3px;
}

.lexgraphnode .lexgraphnodeio:hover .io__typedesc {
    opacity: 1;
}

.lexgraphnode .lexgraphnodeio .io__type:hover {
    filter: brightness(1.2);
}

.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover {
    background-color: rgba(255, 58, 58, 0.829);
}

.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover span {
    display: none;
}

.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover::after {
    content: 'X';
}

.lexgraphnode .lexgraphnodeio[data-active] .io__type {
    filter: brightness(1.4);
}

.lexgraph .lexgraphpropdialog {
    transform: translateY(-96px);
}

.lexgraph .lexgraphpropdialog.opened {
    transform: translateY(0px);
}

.lexgraph .lexgraphgroups {
    z-index: 1;
}

.lexgraphgroup {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    min-width: 96px;
    min-height: 32px;
    border-radius: 8px;

    background: linear-gradient(35deg, #949292 10%, #a7c4bd);
    background-color: unset;
    background-origin: border-box;

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--global-text-primary);
    transition: border 0.05s linear;
    opacity: 0.5;
}

.lexgraphgroup .lexgraphgrouptitle {
    font-size: var(--global-font-size-xl);
    font-family: var(--global-title-font);
    font-weight: 600;
    margin: 8px;
    color: var(--global-text-primary);
    outline: none;
    border: none;
    background: none;
    max-width: 128px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--global-color-primary);
}

.lexgraphgroup .lexgraphgrouptitle:disabled {
    pointer-events: none;
    border: none;
}

.lexgraphgroup .lexgraphgroupresizer {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--global-color-primary);
    border-right: 2px solid var(--global-color-primary);
    border-bottom-right-radius: 8px;
}

.lexgraphgroup .lexgraphgroupresizer:hover {
    border-bottom: 2px solid #4b4b4ba8;
    border-right: 2px solid #4b4b4ba8;
}

.grapharea .graph-title button {
    font-size: var(--global-font-size-xl);
    font-family: var(--global-title-font);
    font-weight: 600;
    color: var(--global-text-primary);
}

/* Video Editor */

.lexvideoeditor {
    display: flex;
    justify-content: center;
}

.lexvideoeditor video {
    width: 100%;
    height: 100%;
}

.lexvideoeditor .lexarea .lexflexarea {
    display: flex;
    justify-content: center;
    padding: 4px 0px;
}

.lexvideoeditor .lexconstrolsarea {
    min-height: 88px !important;
    border-radius: 8px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}

.lexvideoeditor .lexcontrolspanel {
    background-color: var(--global-intense-background);
    margin: 0;
    display: flex;
    align-content: center;
    width: 100% !important;
}

.lexvideoeditor .lexcontrolspanel.lextime {
    width: auto !important;
    border-radius: 5px;
}

.lexvideoeditor .lextimebar {
    width: 100%;
    height: inherit;
}

.lexvideoeditor .lexcomponent.nobranch {
    padding: 0;
    width: 100% !important;
}

.lexvideoeditor .lextext {
    padding-left: 0;
    padding: 6px;
}

.lexvideoeditor .lexbar {
    height: 40px !important;
    margin: 5px 10px;
    padding: 5px;
    width: calc(100% - 40px) !important;
}

.resizeable {
  resize: both;
  overflow: auto;
}

.resize-area {
  position: absolute;
  border: 2px double var(--global-color-accent-light);
  cursor: move;
  z-index: 100;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.resize-handle.tl {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

.resize-handle.tr {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

.resize-handle.bl {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

.resize-handle.br {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

/* Class utilities */

/* Colors */
/* Using !important to override anything written in main stylesheet */

.bg-primary { --background-color: var(--global-color-primary); background-color: var(--background-color)!important }
.bg-secondary { --background-color: var(--global-color-secondary); background-color: var(--background-color)!important }
.bg-tertiary { --background-color: var(--global-color-tertiary); background-color: var(--background-color)!important }
.bg-quaternary { --background-color: var(--global-color-quaternary); background-color: var(--background-color)!important }
.bg-accent { --background-color: var(--global-color-accent); background-color: var(--background-color)!important }
.bg-contrast { --background-color: var(--global-text-primary); background-color: var(--background-color)!important }
.bg-success { --background-color: var(--global-color-success); background-color: var(--background-color)!important }
.bg-error { --background-color: var(--global-color-error); background-color: var(--background-color)!important }
.bg-warning { --background-color: var(--global-color-warning); background-color: var(--background-color)!important }
.bg-white { --background-color: white; background-color: var(--background-color)!important }
.bg-black { --background-color: black; background-color: var(--background-color)!important }
.bg-blur { --background-color: var(--global-blur-background); background-color: var(--background-color)!important }
.bg-none { background: none !important }

.hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
.hover\:bg-secondary:hover { background-color: var(--global-color-secondary) !important }
.hover\:bg-tertiary:hover { background-color: var(--global-color-tertiary) !important }
.hover\:bg-quaternary:hover { background-color: var(--global-color-quaternary) !important }
.hover\:bg-accent:hover { background-color: var(--global-color-accent) !important }
.hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
.hover\:bg-success:hover { background-color: var(--global-color-success) !important }
.hover\:bg-error:hover { background-color: var(--global-color-error) !important }
.hover\:bg-warning:hover { background-color: var(--global-color-warning) !important }
.hover\:bg-mix:hover { background-color: color-mix(in srgb, var(--background-color), var(--global-text-primary) 5%) !important }
.hover\:bg-mix-contrast:hover { background-color: color-mix(in srgb, var(--background-color), var(--global-color-primary) 5%) !important }
.hover\:bg-none:hover { background: none !important }

.fg-primary { color: var(--global-text-primary) !important }
.fg-secondary { color: var(--global-text-secondary) !important }
.fg-tertiary { color: var(--global-text-tertiary) !important }
.fg-quaternary { color: var(--global-text-quaternary) !important }
.fg-accent { color: var(--global-color-accent) !important }
.fg-contrast { color: var(--global-color-primary) !important }
.fg-success { color: var(--global-color-success) !important }
.fg-error { color: var(--global-color-error) !important }
.fg-warning { color: var(--global-color-warning) !important }
.fg-white { color: white !important }
.fg-black { color: black !important }

.hover\:fg-primary:hover { color: var(--global-text-primary) !important }
.hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
.hover\:fg-tertiary:hover { color: var(--global-text-tertiary) !important }
.hover\:fg-quaternary:hover { color: var(--global-text-quaternary) !important }
.hover\:fg-accent:hover { color: var(--global-color-accent) !important }
.hover\:fg-contrast:hover { color: var(--global-color-primary) !important }
.hover\:fg-success:hover { color: var(--global-color-success) !important }
.hover\:fg-error:hover { color: var(--global-color-error) !important }
.hover\:fg-warning:hover { color: var(--global-color-warning) !important }

.hover\:scale-xs:hover { transform: scale(1.01); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
.hover\:scale-sm:hover { transform: scale(1.025); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
.hover\:scale-md:hover { transform: scale(1.05); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
.hover\:scale-bg:hover { transform: scale(1.1); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
.hover\:scale-xl:hover { transform: scale(1.25); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }

.stroke-none { stroke: none }
.fill-current { fill: currentColor }

/* Layout */

.flex { display: flex }
.inline-flex { display: inline-flex !important }
.inline-grid { display: inline-grid !important }
.flex-fill { flex: 1 0 0% }
.grid { display: grid }
.block { display: block }
.inline-block { display: inline-block }
.hidden { display: none !important }

.overflow-auto { overflow: auto }
.overflow-scroll { overflow: scroll }
.overflow-hidden { overflow: hidden }
.overflow-x-auto { overflow-x: auto }
.overflow-y-auto { overflow-y: auto }
.overflow-x-hidden { overflow-x: hidden }

.truncate { overflow: hidden; text-overflow: ellipsis }
.truncate, .whitespace-nowrap { white-space: nowrap }
.whitespace-pre-wrap { white-space: pre-wrap }
.whitespace-break-spaces { white-space: break-spaces }

.text-start { text-align: start }
.text-center { text-align: center }
.text-end { text-align: end }

.leading-none { line-height: 1 }
.leading-tight { line-height: 1.25 }
.leading-snug { line-height: 1.375 }
.leading-normal { line-height: 1.5 }
.leading-relaxed { line-height: 1.625 }
.leading-loose { line-height: 2 }
.leading-inherit { line-height: inherit }

.leading-3 { line-height: 0.75rem }
.leading-4 { line-height: 1rem }
.leading-5 { line-height: 1.25rem }
.leading-6 { line-height: 1.5rem }
.leading-7 { line-height: 1.75rem }
.leading-8 { line-height: 2rem }
.leading-9 { line-height: 2.25rem }
.leading-10 { line-height: 2.5rem }

.text-balance { text-wrap: balance }
.break-words { overflow-wrap: break-word }

.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3 }
.line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4 }

.flex-col { flex-direction: column }
.flex-row { flex-direction: row }
.flex-wrap { flex-wrap: wrap }

.items-start { place-items: start }
.items-center { place-items: center }
.items-end { place-items: end }

.align-items-start { align-items: start }
.align-items-center { align-items: center }
.align-items-end { align-items: end }

.justify-start { justify-content: start }
.justify-center { justify-content: center }
.justify-end { justify-content: end }
.justify-between { justify-content: space-between }
.justify-around { justify-content: space-around }

.self-start { place-self: start }
.self-center { place-self: center }
.self-end { place-self: end }

.content-start { align-content: start }
.content-center { align-content: center }
.content-end { align-content: end }

.place-content-start { place-content: start }
.place-content-center { place-content: center }
.place-content-end { place-content: end }

.grid-column-start-1 { grid-column-start: 1 }
.grid-column-start-2 { grid-column-start: 2 }

/* Spacing */

.gap-0 { gap: 0 }
.gap-0\.5 { gap: 0.125rem }
.gap-1 { gap: 0.25rem }
.gap-2 { gap: 0.5rem }
.gap-3 { gap: 0.75rem }
.gap-4 { gap: 1rem }
.gap-5 { gap: 1.25rem }
.gap-6 { gap: 1.5rem }
.gap-7 { gap: 1.75rem }
.gap-8 { gap: 2rem }
.gap-9 { gap: 2.25rem }
.gap-10 { gap: 2.5rem }
.gap-11 { gap: 2.75rem }
.gap-12 { gap: 3rem }

.mt-auto { margin-top: auto }
.mb-auto { margin-bottom: auto }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }

.m-0 { margin: 0 }
.m-1 { margin: 0.25rem }
.m-2 { margin: 0.5rem }
.m-3 { margin: 0.75rem }
.m-4 { margin: 1rem }
.m-5 { margin: 1.25rem }
.m-6 { margin: 1.5rem }
.m-7 { margin: 1.75rem }
.m-8 { margin: 2rem }

.mt-0 { margin-top: 0 }
.mt-1 { margin-top: 0.25rem }
.mt-2 { margin-top: 0.5rem }
.mt-3 { margin-top: 0.75rem }
.mt-4 { margin-top: 1rem }
.mt-5 { margin-top: 1.25rem }
.mt-6 { margin-top: 1.5rem }
.mt-7 { margin-top: 1.75rem }
.mt-8 { margin-top: 2rem }

.mb-0 { margin-bottom: 0 }
.mb-1 { margin-bottom: 0.25rem }
.mb-2 { margin-bottom: 0.5rem }
.mb-3 { margin-bottom: 0.75rem }
.mb-4 { margin-bottom: 1rem }
.mb-5 { margin-bottom: 1.25rem }
.mb-6 { margin-bottom: 1.5rem }
.mb-7 { margin-bottom: 1.75rem }
.mb-8 { margin-bottom: 2rem }

.ml-0 { margin-left: 0 }
.ml-1 { margin-left: 0.25rem }
.ml-2 { margin-left: 0.5rem }
.ml-3 { margin-left: 0.75rem }
.ml-4 { margin-left: 1rem }
.ml-5 { margin-left: 1.25rem }
.ml-6 { margin-left: 1.5rem }
.ml-7 { margin-left: 1.75rem }
.ml-8 { margin-left: 2rem }

.mr-0 { margin-right: 0 }
.mr-1 { margin-right: 0.25rem }
.mr-2 { margin-right: 0.5rem }
.mr-3 { margin-right: 0.75rem }
.mr-4 { margin-right: 1rem }
.mr-5 { margin-right: 1.25rem }
.mr-6 { margin-right: 1.5rem }
.mr-7 { margin-right: 1.75rem }
.mr-8 { margin-right: 2rem }

.mx-0 { margin-left: 0; margin-right: 0 }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem }
.mx-4 { margin-left: 1rem; margin-right: 1rem }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem }
.mx-7 { margin-left: 1.75rem; margin-right: 1.75rem }
.mx-8 { margin-left: 2rem; margin-right: 2rem }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem }
.mx-12 { margin-left: 3rem; margin-right: 3rem }

.my-0 { margin-top: 0; margin-bottom: 0 }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem }
.my-4 { margin-top: 1rem; margin-bottom: 1rem }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem }
.my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem }
.my-8 { margin-top: 2rem; margin-bottom: 2rem }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem }
.my-12 { margin-top: 3rem; margin-bottom: 3rem }

.p-0 { padding: 0 }
.p-1 { padding: 0.25rem }
.p-2 { padding: 0.5rem }
.p-3 { padding: 0.75rem }
.p-4 { padding: 1rem }
.p-5 { padding: 1.25rem }
.p-6 { padding: 1.5rem }
.p-7 { padding: 1.75rem }
.p-8 { padding: 2rem }
.p-9 { padding: 2.25rem }
.p-10 { padding: 2.5rem }
.p-11 { padding: 2.75rem }
.p-12 { padding: 3rem }

.pt-0 { padding-top: 0 }
.pt-1 { padding-top: 0.25rem }
.pt-2 { padding-top: 0.5rem }
.pt-3 { padding-top: 0.75rem }
.pt-4 { padding-top: 1rem }
.pt-5 { padding-top: 1.25rem }
.pt-6 { padding-top: 1.5rem }
.pt-7 { padding-top: 1.75rem }
.pt-8 { padding-top: 2rem }

.pb-0 { padding-bottom: 0 }
.pb-1 { padding-bottom: 0.25rem }
.pb-2 { padding-bottom: 0.5rem }
.pb-3 { padding-bottom: 0.75rem }
.pb-4 { padding-bottom: 1rem }
.pb-5 { padding-bottom: 1.25rem }
.pb-6 { padding-bottom: 1.5rem }
.pb-7 { padding-bottom: 1.75rem }
.pb-8 { padding-bottom: 2rem }

.pl-0 { padding-left: 0 }
.pl-1 { padding-left: 0.25rem }
.pl-2 { padding-left: 0.75rem }
.pl-3 { padding-left: 0.5rem }
.pl-4 { padding-left: 1rem }
.pl-5 { padding-left: 1.25rem }
.pl-6 { padding-left: 1.5rem }
.pl-7 { padding-left: 1.75rem }
.pl-8 { padding-left: 2rem }

.pr-0 { padding-right: 0 }
.pr-1 { padding-right: 0.25rem }
.pr-2 { padding-right: 0.5rem }
.pr-3 { padding-right: 0.75rem }
.pr-4 { padding-right: 1rem }
.pr-5 { padding-right: 1.25rem }
.pr-6 { padding-right: 1.5rem }
.pr-7 { padding-right: 1.75rem }
.pr-8 { padding-right: 2rem }

.px-0 { padding-left: 0; padding-right: 0 }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
.px-4 { padding-left: 1rem; padding-right: 1rem }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
.px-8 { padding-left: 2rem; padding-right: 2rem }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
.px-12 { padding-left: 3rem; padding-right: 3rem }

.py-0 { padding-top: 0; padding-bottom: 0 }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem }
.py-4 { padding-top: 1rem; padding-bottom: 1rem }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
.py-8 { padding-top: 2rem; padding-bottom: 2rem }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
.py-12 { padding-top: 3rem; padding-bottom: 3rem }

/* Typography */

.text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
.text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
.text-md { font-size: var(--global-font-size); line-height: 1.2rem }
.text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
.text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.6rem }

.font-light { font-weight: 300 }
.font-normal { font-weight: 400 }
.font-medium { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold { font-weight: 700 }
.font-extrabold { font-weight: 800 }

.font-code { font-family: var(--global-code-font) }

.tracking-tighter { letter-spacing: -0.05em }
.tracking-tight { letter-spacing: -0.025em }
.tracking-normal { letter-spacing: 0em }
.tracking-wide { letter-spacing: 0.025em }
.tracking-wider { letter-spacing: 0.05em }
.tracking-widest { letter-spacing: 0.1em }

.italic { font-style: italic }

.uppercase { text-transform: uppercase }
.capitalize { text-transform: capitalize }

.decoration-none { text-decoration: none }
.text-underline { text-decoration: underline }

.hover\:text-underline:hover { text-decoration: underline }

/* Width / Height */

.w-full { width: 100% }
.w-screen { width: 100vw }
.w-auto { width: auto }
.w-fit-content { width: fit-content }

.w-2\/3 { width: 66.666% }
.w-1\/2 { width: 50% }
.w-1\/3 { width: 33.333% }
.w-1\/4 { width: 25% }

.w-1 { width: 0.25rem }
.w-2 { width: 0.5rem }
.w-3 { width: 0.75rem }
.w-4 { width: 1rem }      /* 16px */
.w-5 { width: 1.25rem }
.w-6 { width: 1.5rem }
.w-7 { width: 1.75rem }
.w-8 { width: 2rem }
.w-9 { width: 2.25rem }
.w-10 { width: 2.5rem }
.w-11 { width: 2.75rem }
.w-12 { width: 3rem }
.w-13 { width: 3.25rem }
.w-14 { width: 3.5rem }
.w-15 { width: 3.75rem }
.w-16 { width: 4rem }     /* 64px */
.w-32 { width: 8rem }     /* 128px */

.h-full { height: 100% }
.h-screen { height: 100vh }
.h-auto { height: auto }

.h-1 { height: 0.25rem }
.h-2 { height: 0.5rem }
.h-3 { height: 0.75rem }
.h-4 { height: 1rem }
.h-5 { height: 1.25rem }
.h-6 { height: 1.5rem }
.h-7 { height: 1.75rem }
.h-8 { height: 2rem }
.h-9 { height: 2.25rem }
.h-10 { height: 2.5rem }
.h-11 { height: 2.75rem }
.h-12 { height: 3rem }
.h-13 { height: 3.25rem }
.h-14 { height: 3.5rem }
.h-15 { height: 3.75rem }
.h-16 { height: 4rem }
.h-32 { height: 8rem }

.resize-none { resize: none }

.size-fixed { field-sizing: fixed }
.size-content { field-sizing: content }

/* Positioning */

.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }
.sticky { position: sticky }

.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }

.z-0 { z-index: 0 }
.z-1 { z-index: 1 }
.z-10 { z-index: 10 }
.z-50 { z-index: 50 }
.z-100 { z-index: 100 }
.z-1000 { z-index: 1000 }

/* Borders / Radius / Shadow */

.border { border: 1px solid var(--global-color-tertiary) }
.border-none { border: none }
.border-colored { border: 1px solid currentColor }

.border-solid { border-style: solid }
.border-dashed { border-style: dashed }
.border-dotted { border-style: dotted }
.border-double { border-style: double }

.border-top { border-top: 1px solid var(--global-color-tertiary) }
.border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
.border-left { border-left: 1px solid var(--global-color-tertiary) }
.border-right { border-right: 1px solid var(--global-color-tertiary) }

.border-0 { border-width: 0px }
.border-2 { border-width: 2px }
.border-4 { border-width: 4px }
.border-6 { border-width: 6px }
.border-8 { border-width: 8px }

.border-t-0 { border-top-width: 0 }
.border-b-0 { border-bottom-width: 0 }
.border-l-0 { border-left-width: 0 }
.border-r-0 { border-right-width: 0 }

.rounded-none { border-radius: 0 !important }
.rounded-sm { border-radius: 0.125rem !important }
.rounded { border-radius: 0.25rem !important }
.rounded-md { border-radius: 0.375rem !important }
.rounded-lg { border-radius: 0.5rem !important }
.rounded-xl { border-radius: 0.75rem !important }
.rounded-2xl { border-radius: 1rem !important }
.rounded-3xl { border-radius: 1.5rem !important }
.rounded-full { border-radius: 9999px !important }
.rounded-inherit { border-radius: inherit !important }

.rounded-t-none   { border-top-left-radius: 0; border-top-right-radius: 0 }
.rounded-r-none   { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.rounded-b-none   { border-bottom-right-radius: 0; border-bottom-left-radius: 0 }
.rounded-l-none   { border-top-left-radius: 0; border-bottom-left-radius: 0 }

.rounded-t        { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem }
.rounded-r        { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem }
.rounded-b        { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem }
.rounded-l        { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem }

.rounded-t-lg     { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem }
.rounded-r-lg     { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem }
.rounded-b-lg     { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem }
.rounded-l-lg     { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem }

.rounded-t-full   { border-top-left-radius: 9999px; border-top-right-radius: 9999px }
.rounded-r-full   { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px }
.rounded-b-full   { border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px }
.rounded-l-full   { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px }

.outline-none { outline: none }

.shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) }

/* Interaction / Misc */

.cursor-pointer { cursor: pointer }
.cursor-text { cursor: text }
.pointer-events-none { pointer-events: none }
.pointer-events-auto { pointer-events: auto }

.select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }

.opacity-0 { opacity: 0 }
.opacity-0\.5 { opacity: 0.5 }
.opacity-1 { opacity: 1 }

.linear { transition-timing-function: linear }
.ease-in { transition-timing-function: ease-in }
.ease-out { transition-timing-function: ease-out }

/* Media queries for sizes */

@media (min-width: 768px) {
    .sm\:hidden { display: none !important }
    .sm\:block { display: block !important }
    .sm\:inline { display: inline !important }
    .sm\:flex { display: flex !important }
    .sm\:grid { display: grid !important }
    .sm\:inline-flex { display: inline-flex !important }
    .sm\:inline-block { display: inline-block !important }
    .sm\:flex-fill { flex: 1 0 0% !important }

    .sm\:w-full { width: 100% !important }
    .sm\:w-screen { width: 100vw !important }
    .sm\:w-auto { width: auto !important }
    .sm\:h-full { height: 100% !important }
    .sm\:h-screen { height: 100vh !important }
    .sm\:h-auto { height: auto !important }
    .sm\:w-1\/2 { width: 50% !important }
    .sm\:w-1\/3 { width: 33.333% !important }
    .sm\:w-1\/4 { width: 25% !important }
}

@media (min-width: 1024px) {
    .md\:hidden { display: none !important }
    .md\:block { display: block !important }
    .md\:inline { display: inline !important }
    .md\:flex { display: flex !important }
    .md\:grid { display: grid !important }
    .md\:inline-flex { display: inline-flex !important }
    .md\:inline-block { display: inline-block !important }
    .md\:flex-fill { flex: 1 0 0% !important }

    .md\:w-full { width: 100% !important }
    .md\:w-screen { width: 100vw !important }
    .md\:w-auto { width: auto !important }
    .md\:h-full { height: 100% !important }
    .md\:h-screen { height: 100vh !important }
    .md\:h-auto { height: auto !important }
    .md\:w-1\/2 { width: 50% !important }
    .md\:w-1\/3 { width: 33.333% !important }
    .md\:w-1\/4 { width: 25% !important }
}

@media (min-width: 1440px) {
    .lg\:hidden { display: none !important }
    .lg\:block { display: block !important }
    .lg\:inline { display: inline !important }
    .lg\:flex { display: flex !important }
    .lg\:grid { display: grid !important }
    .lg\:inline-flex { display: inline-flex !important }
    .lg\:inline-block { display: inline-block !important }
    .lg\:flex-fill { flex: 1 0 0% !important }

    .lg\:w-full { width: 100% !important }
    .lg\:w-screen { width: 100vw !important }
    .lg\:w-auto { width: auto !important }
    .lg\:h-full { height: 100% !important }
    .lg\:h-screen { height: 100vh !important }
    .lg\:h-auto { height: auto !important }
    .lg\:w-1\/2 { width: 50% !important }
    .lg\:w-1\/3 { width: 33.333% !important }
    .lg\:w-1\/4 { width: 25% !important }
}

@media (min-width: 1920px) {
    .xl\:hidden { display: none !important }
    .xl\:block { display: block !important }
    .xl\:inline { display: inline !important }
    .xl\:flex { display: flex !important }
    .xl\:grid { display: grid !important }
    .xl\:inline-flex { display: inline-flex !important }
    .xl\:inline-block { display: inline-block !important }
    .xl\:flex-fill { flex: 1 0 0% !important }

    .xl\:w-full { width: 100% !important }
    .xl\:w-screen { width: 100vw !important }
    .xl\:w-auto { width: auto !important }
    .xl\:h-full { height: 100% !important }
    .xl\:h-screen { height: 100vh !important }
    .xl\:h-auto { height: auto !important }
    .xl\:w-1\/2 { width: 50% !important }
    .xl\:w-1\/3 { width: 33.333% !important }
    .xl\:w-1\/4 { width: 25% !important }
}

@media (min-width: 2560px) {
    .xxl\:hidden { display: none !important }
    .xxl\:block { display: block !important }
    .xxl\:inline { display: inline !important }
    .xxl\:flex { display: flex !important }
    .xxl\:grid { display: grid !important }
    .xxl\:inline-flex { display: inline-flex !important }
    .xxl\:inline-block { display: inline-block !important }
    .xxl\:flex-fill { flex: 1 0 0% !important }

    .xxl\:w-full { width: 100% !important }
    .xxl\:w-screen { width: 100vw !important }
    .xxl\:w-auto { width: auto !important }
    .xxl\:h-full { height: 100% !important }
    .xxl\:h-screen { height: 100vh !important }
    .xxl\:h-auto { height: auto !important }
    .xxl\:w-1\/2 { width: 50% !important }
    .xxl\:w-1\/3 { width: 33.333% !important }
    .xxl\:w-1\/4 { width: 25% !important }
}